小程序自定义 tabbar 以vant weapp为例

1.首先建立 custom-tab-bar 文件夹  包含 index.js  index.json index.wxml

// index.js文件
Component({ data: { active:
0, list: [ { "url": "/pages/index/index", "icon": "wap-home-o", "text": "首页" }, { "url": "/pages/index/prize", "icon": "orders-o", "text": "奖品" }, { "url": "/pages/index/exchange", "icon": "points", "text": "兑换" }, { "url": "/pages/index/my", "icon": "user-circle-o", "text": "我的" } ] }, methods: { onChange(e) { console.log(e,‘e‘) this.setData({ active: e.detail }); wx.switchTab({ url: this.data.list[e.detail].url }); }, init() { const page = getCurrentPages().pop(); this.setData({   active: this.data.list.findIndex(item => item.url === `/${page.route}`) }); } } });

index.json文件

{
    "component": true,
    "usingComponents": {
        "van-tabbar": "@vant/weapp/tabbar/index",
      "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-icon": "@vant/weapp/icon/index"
    }
}

index.wxml文件

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
  }}</van-tabbar-item>
</van-tabbar>
  /**
   * 生命周期函数--监听页面显示   在每个tabbar页面onshow 调用即可;
   */
  onShow: function () {
    console.log(‘个人中心‘)
    this.getTabBar().init();
  },

 app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/index/prize",
    "pages/index/exchange",
    "pages/index/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {

  },
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/index/prize",
        "text": "奖品"
      },
      {
        "pagePath": "pages/index/exchange",
        "text": "兑换"
      },
      {
        "pagePath": "pages/index/my",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

 

小程序自定义 tabbar 以vant weapp为例

上一篇:小程序-for指令


下一篇:快速免费用宝塔面板加开源小程序商城源码搭建自己的商城程序