微信官方文檔介紹 官方文檔
1、在小程序根目錄下創(chuàng)建custom-tab-bar文件夾,并創(chuàng)建以下文件。
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-barr/index.wxss

2、修改custom-tab-bar/index.js(清除初始化的內(nèi)容)

Component({
  data: { 
    selected: 0,
    list: [
      {
        pagePath: "/pages/index/index",
        text: "運動咨詢",
        icon: "smile-o",

      },
      {
        pagePath: "/pages/food/food",
        text: "飲食推薦",
        icon:"fire-o",

      },
      {
        pagePath: "/pages/sport/sport",
        text: "運動統(tǒng)計",
        icon:"like-o",

      },
      {
        pagePath: "/pages/user/user",
        text: "個人中心",
        icon:"user-o",

      },

    ]
  },
  methods: {
    onChange(e) {
       console.log(e,'e')
       this.setData({ active: e.detail });
       wx.switchTab({
         url: this.data.list[e.detail].pagePath
       });
    },
    init() {
        const page = getCurrentPages().pop();
        this.setData({
       　  active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
        });
       }
    }
})

3、修改custom-tab-bar/index.json(引入vant 組件)

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

4、修改custom-tab-bar/index.wxml

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

5、在app.json添加tabBar

"tabBar": {
		"custom": true,
		"color": "#000000",
		"selectedColor": "#000000",
		"backgroundColor": "#000000",
		"list": [
        {
          "pagePath": "pages/index/index",
          "text": "運動咨詢"
        },
        {
          "pagePath": "pages/food/food",
          "text": "飲食推薦"
        },
        {
          "pagePath": "pages/sport/sport",
          "text": "運動統(tǒng)計"
        },
        {
          "pagePath": "pages/user/user",
          "text": "用戶中心"
        }
		]
  },

6、每個tabBar頁面的onShow()方法添加 (不添加的話 底部tabBar響應(yīng)需要點擊兩下才可以)

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow:function() {
    this.getTabBar().init();
  },

效果圖如下:

參考文章 link文章來源地址http://www.zghlxwxcb.cn/news/detail-506144.html

到了這里，關(guān)于微信小程序自定義tabBar以及圖標(biāo)-使用vant-weapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！