微信小程序底部导航动态设置（微信小程序底部自定义导航）

微信小程序底部导航相信同学们并不陌生，它的作用是把我们的系统按照不同的功能或意义划分开来。

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

1. 指引用户到达TA们想去的页面
2. 明确划分系统的功能，让用户一目了然系统的大致功能
3. 增加用户体验，让用户使用系统更容易上手
4. 页面多了，需要归类，导入航作为页面入口

自定义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

<view class="cu-bar tabbar bg-gray shadow foot"> <view class="action {{cur_tab=='home'?'text-green':'text-black'}}" bindtap="switchTab" data-path='/pages/index/index'> <view class='cuIcon-home'> </view> 主页 </view> <view class="action {{cur_tab=='logs'?'text-green':'text-black'}}" data-path='/pages/logs/logs' bindtap='switchTab'> <view class='cuIcon-form'></view> 日志 </view> <view class="action {{cur_tab=='comment'?'text-green':'text-black'}}" data-path='/pages/comment/list' bindtap='switchTab'> <view class='cuIcon-comment'> </view> 消息 </view> </view>

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函数里加上这段代码就可以实现切换页面时并激活当前所选的卡片了。

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