uniapp自定义tabbar
在开发微信小程序时,由于uniapp官方的tabbar不满足根据权限区分tab的要求,则自定义了tabbar,出现两个问题;问题一:自定义的tabbar在切换的时候tabbar会闪烁,尤其在用户手机性能不太好的手机型号上闪烁尤其明显;问题二:自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad,页面数据得不到缓存,消耗性能。所以将官方的tabbar和自定义的t
·
在开发微信小程序时,由于uniapp官方的tabbar不满足根据权限区分tab的要求,则自定义了tabbar,出现两个问题;
问题一:自定义的tabbar在切换的时候tabbar会闪烁,尤其在用户手机性能不太好的手机型号上闪烁尤其明显;
问题二:自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad,页面数据得不到缓存,消耗性能。
所以将官方的tabbar和自定义的tabbar结合使用,
(1)在tabbar页面使用uni.hideTabBar({})将官方的tabbar页面隐藏
(2)封装自定义tabbar组件,根据权限分配tab
1. 在pages.json中把tabbar配置好,只需要配置页面路径即可
"tabBar": {
"color": "#909399",
"selectedColor": "#303133",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text":""
},
{
"pagePath": "pages/workOrder/workOrderList",
"text":""
},
{
"pagePath": "pages/my/my",
"text":""
}
]
},
2. 封装tabbar组件,tabbar.vue,使用uni.switchTab({})路由切换tabBar页面
<template>
<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
<cover-view
class="tabbar-item"
v-for="(item,index) in tabNav"
:key="index"
@click="tabbarChange(item.pagePath,index)"
>
<cover-image class="item-img" :src="item.selectedIconPath" v-if="current == index"></cover-image>
<cover-image class="item-img" :src="item.iconPath" v-else></cover-image>
<cover-view
class="item-text"
:class="{'tabbarActive': current == index}"
style="color: #A3A3A3;font-size: 20rpx"
v-if="item.text">{{item.text}}</cover-view>
</cover-view>
</cover-view>
</template>
<script>
export default {
props: {
current: String,
},
data() {
return {
tabNav: [],
paddingBottomHeight: 0 //iPhonex以上手机底部适配高度
}
},
created() {
//适配iPhonex以上的底部
uni.getSystemInfo({
success: (res) => {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
// console.log('iphone',res)
for (let i=0;i<=model.length;i++) {
if(res.model.indexOf(model[i]) != -1 && res.model.indexOf('iPhone') != -1) {
this.paddingBottomHeight = 50
//向父组件传递tabbar高度
this.$emit('tabbarHeight',150)
return
}else {
this.$emit('tabbarHeight',100)
}
}
}
})
// 根据权限配置对应tab导航
let list1 = [{
pagePath: "/pages/index/index",
iconPath: "/static/nav/home.png",
selectedIconPath: "/static/nav/home_select.png",
text: "首页"
},{
pagePath: "/pages/workOrder/workOrderList",
iconPath: "/static/nav/work_order.png",
selectedIconPath: "/static/nav/work_order_select.png",
text: "工单"
},{
pagePath: "/pages/my/my",
iconPath: "/static/nav/my.png",
selectedIconPath: "/static/nav/my_select.png",
text: "我的"
},]
let list2 = [{
pagePath: "/pages/index/index",
iconPath: "/static/nav/home.png",
selectedIconPath: "/static/nav/home_select.png",
text: "首页"
},{
pagePath: "/pages/my/my",
iconPath: "/static/nav/my.png",
selectedIconPath: "/static/nav/my_select.png",
text: "我的"
},]
if(this.$store.state.role == '1') {
this.tabNav = list1
}else {
this.tabNav = list2
}
},
methods: {
//跳转切换tab
tabbarChange(path) {
uni.switchTab({
url: path
})
}
}
}
</script>
<style scoped lang="scss">
.tabbarActive{
color: #000 !important;
}
.tabbar{
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #ffffff;
border-top: 1px solid #e5eaea;
}
.tabbar-item{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// height: 100rpx;
}
.item-img{
margin-bottom: 4rpx;
width: 46rpx;
height: 46rpx;
}
.item-name{
font-size: 26rpx !important;
color: #A3A3A3 !important;
}
</style>
3. 在tabbar页面引入组件,隐藏官方tabbar,
onShow() {
uni.hideTabBar({
animation: false
})
},
更多推荐
所有评论(0)