小程序自定义tabbar以vantweapp为例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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"
}