uniapp开发微信小程序之自定义底部导航栏
微信小程序自定义底部导航栏、隐藏小程序自带的tabbar
·
实现效果:登录之后,能根据不同角色展示不同的tabbar
步骤一:创建一个文件夹,这里是在根目录下创建了components文件夹,在components文件夹中创建了tabBar.vue文件。list 的 格式一定要与 pages.json 中的 tabBar 格式保持一致。代码如下:
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image v-if="routePath == item.pagePath" class="tab_img" :src="item.selectedIconPath"></image>
<image v-else class="tab_img" :src="item.iconPath"></image>
<view class="tab_text" :style="{color: routePath == item.pagePath ? selectedColor : color}">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 当前页面路径
routePath: {
type: String,
required: true
}
},
data() {
return {
color: "#666666",
selectedColor: "#2E82F7",
list: [],
isSelect: false
}
},
created() {
// 这里区分角色是通过userRole,登录接口返回的,有两个角色:餐厅和顾客
console.log(uni.getStorageSync('userRole'))
var _this = this
if (uni.getStorageSync('userRole') == 1) {
// 餐厅
_this.list = [{
"pagePath": "/pages/dishes/index", //地址
"text": "菜品", //文本
"iconPath": "/static/image/tabBar/dishes.png", //未选中图标
"selectedIconPath": "/static/image/tabBar/dishes-active.png" //选中图标
},
{
"pagePath": "/pages/order/order", //地址
"text": "订单", //文本
"iconPath": "/static/image/tabBar/order.png", //未选中图标
"selectedIconPath": "/static/image/tabBar/order-active.png" //选中图标
}
]
} else {
// 顾客
_this.list = [
{
"pagePath": "/pages/menu/menu", //地址
"text": "菜单", //文本
"iconPath": "/static/image/tabBar/menu.png", //未选中图标
"selectedIconPath": "/static/image/tabBar/menu-active.png" //选中图标
},
{
"pagePath": "/pages/my/my", //地址
"text": "我的", //文本
"iconPath": "/static/image/tabBar/my.png", //未选中图标
"selectedIconPath": "/static/image/tabBar/my-active.png" //选中图标
}
]
}
},
methods: {
switchTab(item, index) {
console.log(' _this.list', this.list)
let url = item.pagePath;
wx.switchTab({
url: url
})
}
}
}
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 140rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 54rpx;
height: 50rpx;
}
.tab_text {
font-size: 26rpx;
margin-top: 9rpx;
}
}
}
</style>
步骤二:pages.json 中 tabBar 的 list 写法如下
"tabBar": {
"color": "#999999",
"selectedColor": "#297FF7",
"fontSize": "32px",
"list": [{
"pagePath": "pages/dishes/index"
},
{
"pagePath": "pages/order/order"
},
{
"pagePath": "pages/menu/menu"
},
{
"pagePath": "pages/my/my"
}
]
}
步骤三:main.js中注册
import tabBar from 'components/tabBar.vue'
// 注册tabBar为全局组件
Vue.component('tabBar',tabBar)
步骤四:引用,在需要底部导航栏的页面中引用
<template>
// routePath是给子组件传参,一定要写,否则容易跳的页面是你上一个点击图标对应的页面,routePath传的当前页面的地址,pages前一定要带 / ,代表绝对地址
<tabBar routePath = '/pages/dishes/index'></tabBar>
</template>
<script>
export default {
data() {
return {
};
},
onShow() {
// 隐藏掉自带的底部导航栏
uni.hideTabBar({});
}
}
</script>
最后,如果一个页面,有多个角色都用到,但是tabBar是不同的,建议引用的时候加一个判断,否则频繁切换不同的角色,可能会出现页面内容变换了,但是tabBar没变换的情况;这种情况不知道是不是缓存的问题,也可以试试用 vuex 存储 list ,看能不能解决这个问题。我就太懒了,就直接加了个判断。代码如下:
<template>
<tabBar v-if="userRole == 1" routePath = '/pages/dishes/index'></tabBar>
<tabBar v-if="userRole == 2" routePath = '/pages/dishes/index'></tabBar>
</template>
<script>
export default {
data() {
return {
userRole : ''
};
},
onShow() {
// 隐藏掉自带的底部导航栏
uni.hideTabBar({});
this.userRole = uni.getStorageSync('userRole')
}
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)