微信小程序底部导航的意义和实现流程和流程介绍

相信同学们对微信小程序的底部导航很熟悉了。它的作用是根据不同的功能或意义来划分我们的系统。

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

引导用户到他们想去的页面。清晰划分系统功能，让用户对系统的大致功能一目了然，增加用户体验，让用户使用系统更容易上手更多需要分类导入的页面作为页面入口

自定义，最终效果

那么如何在微信小程序中实现TA呢？

答案马上就要出来了，那就是定制吧。

顾名思义，自定义导航()就是我们可以根据自己的意思来安排和自定义我们想要的导航。

自定义让开发者可以更灵活地设置样式，满足更多个性化场景。

我们来说说实现过程。

第一步：配置app.json文件并启用自定义

配置 app.json 以启用自定义

第二步：创建自定义组件文件夹并添加相关页面文件

创建自定义组件

第 3 部分：编辑 -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;
}

最后我们编译一下看看效果。

可以看到页面可以切换，但是菜单并没有随之切换颜色（激活状态），因为还少了一个步骤。

就是给每个页面添加一段关键的代码

将此代码添加到页面对应的功能中现在可以切换页面并激活当前选择的卡。

好了导航样式的自定义，本期就到这里，感谢您的耐心阅读导航样式的自定义，继续关注小搜会给大家带来更多有用的文章。