uniapp动态更新TabBar
【代码】uniapp动态更新TabBar。
·
- uniapp官方的tabbar提供了
uni.setTabBarItem
等动态更新的方法,并且说明中提到适用于微信小程序。 - 但是经过很多人的测试,
uni.setTabBarItem
等方法在微信小程序中并不完全生效,所以需要使用到自定义TabBar。 - 自定义TabBar在本文中其实只是一种思路,将一个页面作为基础页面,绘制TabBar,业务功能页面作为组件进行切换显示,详细代码如下:
基础页面
<template>
<view>
<view style="padding-bottom: 120rpx;">
<index v-if="PageCur=='home'"></index>
<work v-else-if="PageCur=='work'"></work>
<mine v-else-if="PageCur=='mine'"></mine>
</view>
<view class="cu-bar tabbar bg-white shadow foot">
<view v-for="item in tabBarItemList" class="action" @click="NavChange" :data-cur="item.name">
<view class='cuIcon-cu-image'>
<!-- 这里展示图标,点击后图标为未点击图标加 _ -->
<image :src="item.imgPath + [PageCur==item.name?'_':''] + '.png'"></image>
</view>
<view :class="PageCur==item.name?'text-blue':'text-gray'">{{item.text}}</view>
</view>
</view>
</view>
</template>
<script>
import index from '@/pages/index/index.vue'
import work from '@/pages/work/index.vue'
import mine from '@/pages/mine/index.vue'
export default {
components:{
index,
work,
mine
},
data() {
return {
PageCur: 'home',
tabBarItemList: []
}
},
mounted() {
// this.tabBarItemList = getApp().globalData.tabBarItemList
this.tabBarItemList = [
{
"name": "home",
"text": "首页",
"imgPath": "/static/images/tabbar/home",
},
{
"name": "work",
"text": "工作台",
"imgPath": "/static/images/tabbar/work",
},
{
"name": "mine",
"text": "我的",
"imgPath": "/static/images/tabbar/mine",
},
]
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
}
}
}
</script>
<style>
</style>
在需要使用动态更新的时候,只需要更新tabBarItemList
的值即可,十分方便且轻量
PS: 我这里的组件引入方式非 easycom 引入,若使用 easycom把页面放到@/components
直接调用即可
更多推荐
已为社区贡献1条内容
所有评论(0)