⼩程序动态tab-bar，解决页⾯跳动问题通过⾃定义组件实现动态tab-bar，并且防⽌tab切换时出现跳动问题
将tab页⾯写成⼀个组件（不知道有啥副作⽤，不过⽬前似乎可⾏）
⼩程序ui框架（Vant Weapp）
1. index(wxml)
<block>
<view wx:if="{{active == '待办通知'}}">
<todo-notice></todo-notice>
</view>
<view wx:if="{{active == '⼊户检查'}}">
<indoor-check></indoor-check>
</view>
<view wx:if="{{active == '电话回访'}}">
<text>电话回访</text>
</view>
<view wx:if="{{active == '督促整改'}}">
<text>督促整改</text>
</view>
<view wx:if="{{active == '我的'}}">
<text>我的</text>
</view>
</block>
<van-tabbar active="{{ active }}" bind:change="onChange" placeholder="true" safe-area-inset-bottom>
<van-tabbar-item wx:for="{{list}}" wx:key="index" name="{{}}" wx:if="{{item.isShow}}">
<image slot="icon" src="{{ item.iconPath }}" mode="aspectFit" />
<image slot="icon-active" src="{{ item.selectedIconPath }}" mode="aspectFit"
/>
{{}}
</van-tabbar-item>
</van-tabbar>
2. index(index.js)
const app = getApp()
Page({
data: {
active: '',
title: '⾸页',
list: []
},
onLoad() {
this.setData({ //动态tab-bar数据格式
list: [{
index: 0,
pagePath: "/pages/index/index",
text: "待办通知",
iconPath: "../../images/tab_bar/dbtz.png",
selectedIconPath: "../../images/tab_bar/dbtz-active.png",
isShow: true,
},
{
index: 1,
pagePath: "/pages/household/household",
text: "⼊户检查",
iconPath: "../../images/tab_bar/rhjc.png",
selectedIconPath: "../../images/tab_bar/rhjc-active.png",
isShow: true
},
{
index: 2,
pagePath: "/pages/phoneback/phoneback",
text: "电话回访",
iconPath: "../../images/tab_bar/callphone.png",
selectedIconPath: "../../images/tab_bar/callphone-active.png",
isShow: true
},
{
index: 3,
pagePath: "/pages/rectification/rectification",
text: "督促整改",
iconPath: "../../images/tab_bar/dczg.png",
selectedIconPath: "../../images/tab_bar/dczg-active.png",
isShow: true
},
{
index: 4,
pagePath: "/pages/mine/mine",
text: "我的",
iconPath: "../../images/tab_bar/mine.png",
selectedIconPath: "../../images/tab_bar/mine-active.png",          isShow: true
}
]
})
try { // 刚进页⾯时判断第⼀个tab
this.data.list.forEach((item) => {
if (item.isShow) {
this.setData({
active: ,
// title:
})
throw ('循环停⽌')
}
})
} catch (e) {
console.log(e)
}
},
onChange(event) {
console.log(event)
this.setData({
active: event.detail,selectediconpath什么意思
// title: event.detail
})
}
})
3.index(index.json)
{
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index",
"van-nav-bar": "@vant/weapp/nav-bar/index",
"todo-notice": "../../components/todoNotice/todoNotice",
"indoor-check": "../../components/indoorCheck/indoorCheck"  },
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}

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