微信小程序引入vant封装tabbar

冷不防 2022-10-12 01:41 148阅读 0赞

1、先创建一个custom-tab-bar文件夹，然后在微信开发者工具里面找到该文件夹，点击右键新建一个component；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI4Mjg5OA_size_16_color_FFFFFF_t_70]  
2、custom-tab-bar/index.wxml

<van-tabbar active="{
       { active }}" active-color="#DB7093" inactive-color="#DCDCDC" bind:change="onChange">
      <van-tabbar-item wx:for="{
       {list}}" wx:key="index" icon="{
       {item.icon}}">{
       {item.text}}</van-tabbar-item>
    </van-tabbar>

3、custom-tab-bar/index.js

Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        active : 0,
        list: [
          {
            pagePath: "/pages/home/home",
            text: "首页",
            icon: 'wap-home',
          },
          {
            pagePath: "/pages/collect/collect",
            text: "收藏",
            icon: 'like',
          },
          {
            pagePath: "/pages/notice/notice",
            text: "通知",
            icon: 'invition',
          },
          {
            pagePath: "/pages/user/user",
            text: "我的",
            icon: 'friends',
          }
        ]
      },
      
      /**
       * 组件的方法列表
       */
      methods: {
        onChange(e) {
          // console.log(e.detail);
          let index = e.detail;
          wx.switchTab({
            url: this.data.list[index].pagePath
          })
        }
      }
    })

4、app.json

"tabBar": {
        "custom": true,
        "list": [
          {
            "pagePath": "pages/home/home",
            "text": "首页"
          },
          {
            "pagePath": "pages/collect/collect",
            "text": "收藏"
          },
          {
            "pagePath": "pages/notice/notice",
            "text": "通知"
          },
          {
            "pagePath": "pages/user/user",
            "text": "我的"
          }
        ]
      },

5、在每个tabbar页面的onLoad加上this.getTabBar().setData(\{ active : tabbar的下标 \})

onLoad: function (options) {
        this.getTabBar().setData({
          active : 0
        })
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI4Mjg5OA_size_16_color_FFFFFF_t_70]: /images/20221005/82cda147b67a454c8444fd208c6a1a12.png