⼩程序⾃定义tabbar，以及激活状态闪烁的解决⽅案
⼩程序官⽅代码如下(⾃定义tabbar组件)
Component({
data: {
selected: 0,      //代表当前激活状态
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/index/index",    //app.json 中定义是index/index，在这⾥需要在前⾯加上/:/index/index
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png",
text: "组件"
}, {
pagePath: "/index/index2",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png",
text: "接⼝"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selectediconpath什么意思selected: data.index    //代表切换激活状态
})
}
}
})
　//⼩程序tabbar，在路由跳转时，会恢复初始激活状态，所以必须在跳转的页⾯⾥加上这样⼀段代码
/
/官⽅写法，会带来⼀个bug，有时pageLifetimes⾥的show不会执⾏
Component({
pageLifetimes: {
show() {          //代表⽗组件页⾯显⽰时，⼦组件执⾏的⽅法
if (TabBar === 'function' &&
selected: 0          //将tabbar的值重新设为当前页⾯需要激活的值
})
}
}
}
})
//可以使⽤⼀下写法修复，将Component改为Page,⽅法写在onShow⾥即可
Page({
onShow: function () {
if (TabBar === 'function' &&
selected: 0          //将tabbar的值重新设为当前页⾯需要激活的值
})
}
},
})
  //⼩程序⾃定义tabbar完成，按照官⽅教程，不过，在实际项⽬中，会出现以下问题，⼩程序会激活其他tabbar，然后，在激活当前tabbar，可以这样解决，⾃定义tabbar js修改如下
Component({
data: {
selected: '',    //只需要将它的初始激活状态从指定的值设为空，就⾏
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/index/index",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png",
text: "组件"
}, {
pagePath: "/index/index2",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png",
text: "接⼝"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
  //完美解决，因为⼩程序路由跳转，tabbar会重新加载⼀次，就会有初始值，进⼊⼀个新的页⾯时，会先显⽰初始值，再显⽰设置的值，就会出现闪烁效果。
  注释：可以在tabbar的switchTab⽅法中使⽤全局变量app.globalData存储要跳转的selected值，在⾃定义tabbar的 attached⽣命周期中，将selected设置为app.globalData中存储的新路由值，bar切换效果会更好.

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