uniapp⾃定义tabBar
uniapp⾃定义tabBar⽅案
该⽅案，可以在切换tabBar的时候，路由也跟着变化，⽅便平时进⾏页⾯测试使⽤，不过有个缺点，第⼀次切换的时候会出现闪烁现象。
解决闪烁的问题：
1、可以把tabBar和页⾯组件都放在单页中⽤v-if判断，进⾏切换，单页切换的缺点是不能进⾏路由跳转（不能路由跳转）
<template>
<view>
<index></index>
<my></my>
<team></team>
<promotion></promotion>
<tab-bar></tab-bar>
</view>
</view>
</template>
2、把组件注⼊App.vue中，实现全局引⽤，但是uniapp不建议在App.vue中使⽤页⾯组件，也不要使⽤，不然出现各种问题，uniapp不能像vue那样在App.vue使⽤router-view实现选项卡功能（不推荐）
3、 所以要同时实现⾸次不闪烁，⽽且可以进⾏路由切换的功能，⽬前不知道如何处理。（未知）
（⽅案还有需要完善的地⽅，这⾥仅供⼤家参考）
⼀、pages.json⽂件中添加tarBar
因为需要⽤到tabBar跳转，因此可以往原来的tabBar.list中多添加⼏个,⽤于做判断是否tabBar切换(这⾥可以只添加路径，icon和text可以不需要)
⼆、把原⽣的tabBar隐藏起来
在App.vue中把原⽣的tabBar先隐藏起来
onLaunch: function() {
console.log('App Launch')
uni.hideTabBar()
},
三、⾃定义⼀个tabBar组件
在components中新建⼀个tabBar.vue的页⾯，⽤来封装组件
HTML代码，这⾥循环遍历⾃⼰定义的tabBar.list(可根据需求来定义)
<view v-if="showselected">
<view class="tabbar">
<view class="navigator">
<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
@click="switchTab(index,item)">
<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
<img :src="item.selectedIconPath" class="icon" v-else>
<text :class="['item-text',{'text-active':selectedIndex === index}]">{{}}</text>
</view>
</view>
</view>
</view>
data⾥⾯定义变量和循环列表，list即是⾃⼰定义的tabBar，和pages.json的tabBar写法⼀样
data() {
return {
selectedIndex: 0, // 标记
showselected: false, // 是否在页⾯使⽤tarBar
tabBar: {
list: [{
"pagePath": "pages/index/index",
"iconPath": "/static/tabIcon/icon1.png",
"selectedIconPath": "/static/tabIcon/icon2.png",
"text": "⾸页"
}, {
"pagePath": "pages/team/team",
"iconPath": "/static/tabIcon/icon3.png",
"selectedIconPath": "/static/tabIcon/icon4.png",
"text": "团队"
}, {
"pagePath": "pages/promotion/promotion",
"iconPath": "/static/tabIcon/icon5.png",
"selectedIconPath": "/static/tabIcon/icon6.png",
"text": "推⼴圈"
},
{
"pagePath": "pages/my/my",
"iconPath": "/static/tabIcon/icon7.png",
"selectedIconPath": "/static/tabIcon/icon8.png",
"text": "我的"
}
]
},
}
},
如果需要根据不同⽤户来渲染不同tabBar，可⽤vuex来保存tabBar的list列表
const user_1 = [{
"pagePath": "../pages/test/me",
"iconPath": "../static/xxx.png",
selectediconpath什么意思"selectedIconPath": "../static/xxx.png",
"text": "me"
}, {
"pagePath": "../pages/test/you",
"iconPath": "../static/xxx.png",
"selectedIconPath": "../static/xxx.png",
"text": "you"
}, {
"pagePath": "../pages/test/other",
"iconPath": "../static/xxx.png",
"selectedIconPath": "../static/xxx.png",
"text": "other"
},
]
const user_2 = [{
"pagePath": "../pages/test/our",
"iconPath": "../static/xxx.png",
"selectedIconPath": "../static/xxx.png",
"text": "our"
}, {
"pagePath": "../pages/test/his",
"iconPath": "../static/xxx.png",
"selectedIconPath": "../static/xxx.png",
"text": "his"
},
]
export default {
user_1,
user_1
}
四、全局引⽤组件
往main.js注⼊组件
// main.js
import tabBar from 'components/tab-bar/tabBar.vue'
Vueponent('tab-bar',tabBar) //挂载
在每⼀个页⾯中引⼊
<template>
<view>
<view class="">我是⾸页</view>
<tab-bar></tab-bar>
</view>
</template>
五、路由跳转
tabBar定义成了组件，因此需要⼀个全局变量来判断它的切换和路由的跳转。
⾸先，进⼊到uniapp的官⽅tabBar源码中，可以看到这样⼀段代码，下⾯的这段代码，就是路由跳转的依据，把他复制到⾃⼰的组件中，进⾏改造。
watch: {
$route: {
immediate: true,
handler (to) {
if (to.meta.isTabBar) { // 判断是否属于tarBar
// this.__path__ = to.path
// 判断路由的路径和tarBar.list的pagePath是否相同，来确定⼀个全局的index
const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
if (index > -1) {
this.selectedIndex = index // 标记是第⼏个tarBar
}
}
}
}
},
定义跳转的⽅法，这⾥⽤的是uni.switchTab进⾏跳转，不然url不会发⽣变化。注释掉的代码是官⽅的代码，这⾥是直接复制过来⾃⼰⽤。
methods: {
switchTab(index, item) {
let url = '/' + item.pagePath
let pagePath = url
const detail = {
index,
pagePath
}
if (this.$route.path !== url) {
// this.__path__ = this.$route.path
uni.switchTab({
from: 'tabBar',
url,
detail
})
} else {
// it('onTabItemTap', detail)
}
this.selectedIndex = index
// this.$emit('switchTab', detail)
}
},
六、完整代码
<template>
<view class="tabbar">
<view class="navigator">
<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
@click="switchTab(index,item)">
<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
<img :src="item.selectedIconPath" class="icon" v-else>
<text :class="['item-text',{'text-active':selectedIndex === index}]">{{}}</text>
</view>
</view>
</view>
</view>
</template>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。