UniAPP是一款基于Vue.js开发框架的全端开发工具，它可以将代码编译到不同的平台，例如安卓、IOS、H5以及小程序等等。在UniAPP中，tabbar是常用组件，用来实现各项功能的切换。而本篇文章就将着重讲解UniAPP中如何实现tabbar的滑动切换。
一、tabbar基础组件
在UniAPP中，实现tabbar需要借助uni-ui的tabbar组件，该组件是基于uni-icons图标库和自定义图标集的封装，所以在使用前还需要在App.vue中引入uni-icons图标库。接下来，我们可以在static中自定义图标，代码如下所示：
{
"path": "/pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"app-plus": {
"bounce": "none"
}
},
"usingComponents": {
"uni-tabbar": "/components/uni-tabbar/uni-tabbar.vue",
"uni-tabbar-item": "/components/uni-tabbar-item/uni-tabbar-item.vue"
},
"disableScroll": true,
"tabBar": {
"color": "#999999",
"selectedColor": "#F56C6C",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [{
"pagePath": "/pages/index/index",
"iconPath": "/static/index.png",
"selectedIconPath": "/static/index_active.png",
"text": "首页"
}, {
"pagePath": "/pages/list/list",
"iconPath": "/static/list.png",
"selectedIconPath": "/static/list_active.png",
"text": "列表"
}, {
"pagePath": "/pages/mine/mine",
"iconPath": "/static/mine.png",
"selectedIconPath": "/static/mine_active.png",
"text": "我的"
}]
}
}
代码解析：
- tabBar：是一个对象，用来设置tabBar的样式和内容。
- color：未选中标签的颜色。
- selectedColor：选中标签的颜色。
- backgroundColor：背景色。
- borderStyle：边框样式，现在未设置。
- list：是一个数组，每一项表示一个tabBar选项。
二、实现滑动切换
现在我们已经知道如何使用tabBar组件，接下来让我们来实现滑动切换。UniAPP中可以利用一个功能强大的组件uni-transition，这个组件提供了丰富的CSS3动画效果，而且还可以自定义动画效果。在实现滑动切换中，我们可以通过设置tabBar的样式和结合uni-transition组件，实现一个简单、美观、实用的滑动效果。
1. 设置样式
首先，在global.scss文件中设置tabBar的样式：
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
background-color: #ffffff;
height: 50px;
z-index: 999;
.tab-bar-item {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #606266;
&.active {
color: #F56C6C;
.uni-img {
animation: aniImg .8s ease-in-out both;
}
}
.uni-img {
width: 25px;
height: 25px;
}
.uni-number {
line-height: 1.5;
font-size: 12px;
padding: 2px 4px;
border-radius: 8px;
background-color: #F56C6C;
color: #ffffff;
margin-left: -10px;
}
}
}
代码解析：
- .tab-bar：设置tabBar的样式，使其居底固定。
- .tab-bar-item：设置tabBar-item的样式，flex-grow使每个item均占一定比例。
- &.active：设置选中状态下的样式，可以用来添加动画。
- .uni-img：图片样式。
- .uni-number：数字样式。
2. 编写滑动效果组件
接下来，我们来编写滑动效果组件。代码如下所示：
<template>
<div class="swiper">
<div class="swiper-list">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
currentIndex: {
type: Number,
default: 0
}
},
watch: {
currentIndex(value) {
this.scroll(value)
}
},
mounted() {
this.scroll(this.currentIndex)
},
methods: {
scroll(i) {
let gallary = this.$refs.swiperList
let galleryWidth = gallary.offsetWidth
let offset = i * galleryWidth
uni.createSelectorQuery().in(this).select('.swiper-list').scrollLeft(offset).exec()
}
}
}
</script>
<style scoped>
.swiper {
overflow: hidden;
background-color: #ffffff;
.swiper-list {
display: flex;
flex-wrap: nowrap;
transition: all .3s;
}
}
</style>
代码解析：
- currentIndex：表示当前选中的tabBarItem的项数，默认是第1项。
- watch：监听currentIndex属性的改变，并触发scroll方法。
- mounted：组件挂载完成后，执行scroll方法，使该组件滑到正确的位置。
- scroll：滑动方法，根据currentIndex计算出偏移量offset，然后使用uni.createSelectorQuery().in(this).select('.swiper-list').scrollLeft(offset).exec()方法来滑动到指定位置。
- .swiper：父盒子，用来包裹所有的子盒子。overflow: hidden用来将子盒子设置为固定高度，防止tabBar内容过多时出现纵向滚动条。background-color: #ffffff设置背景色为白色。
- .swiper-list：是真实的盒子，用来包裹所有的子盒子。display: flex;flex-wrap: nowrap;是强制所有的子盒子水平排列的。
- transition: all 0.3s;是为了加入一个过渡效果。
3. 利用swiper组件实现滑动
在uni-ui中能够使用强大的swiper组件来实现滑动效果。实现方法与前文类似，只需在相应页面的template中添加swiper组件即可。
<template>
<div>
<uni-tabbar :show="true" :index="0"></uni-tabbar>
<map :id="'map' + tabActive"></map>
<swiper :currentIndex="tabActive" ref="mySwiper">
<swiper-item>
<div class="my-page">
<h2>第一页的内容</h2>
...
</div>
</swiper-item>
<swiper-item>
<div class="my-page">
<h2>第二页的内容</h2>
...
</div>
</swiper-item>
<swiper-item>
<div class="my-page">
<h2>第三页的内容</h2>
...
</div>
</swiper-item>
</swiper>
</div>
</template>
<script>
import uniTabBar from "@/components/uni-tabbar/uni-tabbar.vue";
import swiper from "@/components/swiper/swiper.vue";
import swiperItem from "@/components/swiper/swiper-item.vue";
export default {
components: {
uniTabBar,
swiper,
swiperItem
},
data() {
return {
tabActive: 0,
markers: [] // 地图marker数组
};
},
methods: {
switchTab(index) {
this.tabActive = index;
this.$refs.mySwiper.scroll(index);
}
}
};
</script>
<style scoped>
.my-page {
height: 800rpx;
}
</style>
代码解析：
- swiper：是一个vue组件，需要在template中引入。
- swiper-item：是swiper组件中的一个子组件，表示一个子页面。注意：在无法确定swiper-item的数量时可以使用v-for动态生成。
- switchTab：tabBar的点击事件函数，在点击不同的tabBar-item时修改tabActive的值并调用$this.refs.mySwiper.scroll(index)方法来滑动到相应的页面。
三、总结
本文介绍了如何在UniAPP中实现tabbar的滑动切换，通过示例演示了具体的操作步骤。在实现滑动效果中，借助uni-transition和swiper组件可以非常快速、简单的实现基于tabBar的切换，满足用户的更高需求。希望本文对正在学习UniAPP的小伙伴有所帮助。