微信小程序底部自定义导航，教你如何轻松实现

微信小法式底部导航相信同学们并不陌生，它的感化是把我们的系统依照分歧的功用或意义分别隔来。

导航的意义首要有以下几点：

指援用户到达TA们想去的页面明白分别系统的功用，让用户了如指掌系统的大致功用增加用户体验，让用户利用系统更轻易上手页面多了，需要归类，导入航作为页面进口

自界说tabbar,终极结果

那末要在微信小法式怎样实现TA呢？

答案呼之欲出，就是自界说tapbar啦。

望文生义，自界说导航（tabbar）就是可以依照自己的意义编排、定制我们想要的导航。

自界说 tabBar 可以让开辟者加倍灵活地设备 tabBar 款式，以满足更多本性化的场景。

下面我们来说下实现流程。

第一步：设置app.json文件，开启自界说tabbar



设置app.json开启自界说tabbar

第二步：建立自界说tabbar组件文件夹，并增加相关页面文件



建立自界说tabbar组件

第三步：编辑custom-tab-bar下面的文件

index.js
Component({
options: {
addGlobalClass: true,
},
data: {
},
methods: {
switchTab(e) {
const url = e.currentTarget.dataset.path
wx.switchTab({
url
})
},
},
pageLifetimes: {
show(e) {
}
}
})

index.wxml



主页


日志




消息



index.json
{
"component": true
}

index.wess
.text-green{
color: #39b54a;
}
.bg-gray {
background-color: #f0f0f0;
color: #666;
}
.bg-white {
background-color: #ffffff;
color: #666666;
}

最初，我们编译一下看结果。

可以看到页面能切换了，可是菜单并没有随着切换色彩（激活状态），由于还漏了一步没做。

就是在每个page里面要加上一段很关键的代码



对应page的onShow函数里加上这段代码便可以实现切换页面时并激活当前所选的卡片了。

好了，这一期就到这里啦，感谢大师的耐心阅读，延续关注小搜将为您带来更多适用的文章。