微信小程序如何设置自定义tabBar

Posted 2023-03-31 Kerwin__li

1、创建文件

        在文件根目录创建组件名字为：custom-tab-bar（指定名称）

2、配置app.json

        添加custom属性，让其自定义

"tabBar": 
  "custom": true,
  "list":[....]

        此时保存后 tabbar 区域中就是组件中的内容了

3、配置组件内容

        在这里我们使用vantweapp 来演示

        ①、在app.json中 引入全局组件

"usingComponents": 
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"

       ②、在index.wxml 中应用vant

<van-tabbar active=" active " bind:change="onChange">
 // 遍历内容
  <van-tabbar-item info="3" wx:for="list" wx:key="index" >
    <image
      slot="icon"
      src=" item.iconPath "
      mode="aspectFit"
      style="width: 30px; height: 25px;"
    />
    <image
      slot="icon-active"
      src=" item.selectedIconPath "
      mode="aspectFit"
      style="width: 30px; height: 25px;"
    />
    item.text
  </van-tabbar-item>
</van-tabbar>

        ③、index.js 部分逻辑

Component(
  data: 
    active: 0,
    list: [.....],

  methods: 
    onChange(event) 
      this.setData(
        active: event.detail
      );
      // 切换页
      wx.switchTab(
        url: this.data.list[event.detail].pagePath,
      )
    ,
  
)

注意：此时已经可以正常切换页面了，但是会出现问题，点击更换pages后，高亮存在问题。

分析：每次切换pages 会导致重新创建一个tabbar组件，他用来控制的active 不受切换前的修改逻辑影响，既：修改的为切换前的tabbar组件的tabbar

4、解决高亮BUG

        方法一：切换时加载后更新active

        每次在页面显示的时候，通过getTabbar() 方法获取实例修改

  onShow: function () 
    this.getTabBar().setData(
      // 根据list 的索引
      active: 1
    )
  ,

        方法二：使用数据共享

        ①、在组件的js 文件中配置共享

import  storeBindingsBehavior  from 'mobx-miniprogram-bindings'
import store from '../store/store'
Component(
  behaviors:[storeBindingsBehavior],
  storeBindings:
    store,
    fields:['active'],
    actions:['updateActive']
  ,
  methods: 
    onChange(event) 
      // this.setData(
      //   active: event.detail
      // );
      // 触发修改共享数据的方法，并将当前的index 传递进去
      this.updateActive(event.detail)
      wx.switchTab(
        url: this.data.list[event.detail].pagePath,
      )
    ,
  
)

        ②、在store中 设置active 保存选中的页面

export const store = observable(
  active:0,
  // ....
  
  // 更新当前点击的索引标识符
  updateActive:action(function(val)
    this.active = val
  )
)

此时就可以正常显示了，但是有闪烁的情况发生

微信小程序自定义Tabbar，附详细源码

参考技术A

分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，博主分享了GitHub地址。

由于微信小程序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件，自己写的样式，在需要用到的页面引入组件。
组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。
交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ；

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END

往期文章

个人主页