Vant自定义微信小程序tabBar

使用之前确保小程序已经安装了vant 安装参考

文章使用的就是vant中的tabBar Vant tabBar

文章中的图标同样来自vant Vant 图标

之前tabBar

之前博主写微信小程序的时候tabBar的配置是直接写在app.json中 类型下面这种

参数	说明
pagePath	跳转的页面
text	文字说明
iconPath	图标
selectedIconPath	选中显示图标

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },{
      "pagePath": "pages/demo1/demo1",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },{
      "pagePath": "pages/video/video",
      "text": "视频",
      "iconPath": "icon/_videocamera.png",
      "selectedIconPath": "icon/videocamera.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    }
    ]
  }
}

vant的tabBar

同样和之前一样，配置tabBar写在app.json中 少了一些属性,但是多了一个custom属性

参数	说明
custom	是否自定义tabBar
pagePath	跳转路径
text	说明文字

配置tabBar

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/topic/topic",
        "text": "专题"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
}

新建页面

在app.json中添加需要使用的UI

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

在app.json中的pages数组中添加一个页面（其实算组件）

"custom-tab-bar/index"

编译后出现文件夹

修改custom-tab-bar

index.wxml

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="darkred" inactive-color="#333">
    <block wx:for="{{list}}" wx:key="index">
        <van-tabbar-item icon="{{item.iconPath}}" icon-active="{{item.selectedIconPath}}">{{item.text}}</van-tabbar-item>
    </block>
</van-tabbar>

Index.json

{
    "usingComponents": {},
    "component": true
}

Index.js

默认这个是开头是Page 需要改成Component

// custom-tab-bar/index.js
Component({

    /**
     * 页面的初始数据
     */
    data: {
        //当前选中的索引
        active: 0,
        list: [{
            "pagePath": "/pages/home/home",
            "text": "首页",
            "iconPath": "home-o",
            "selectedIconPath": "home",
        },
            {
                "pagePath": "/pages/topic/topic",
                "text": "专题",
                "iconPath": "label-o",
                "selectedIconPath": "label",
            },
            {
                "pagePath": "/pages/category/category",
                "text": "分类",
                "iconPath": "apps-o",
                "selectedIconPath": "apps",
            },
            {
                "pagePath": "/pages/cart/cart",
                "text": "购物车",
                "iconPath": "cart-o",
                "selectedIconPath": "cart",
            },
            {
                "pagePath": "/pages/user/user",
                "text": "我的",
                "iconPath": "user-o",
                "selectedIconPath": "user",
            }
        ]
    },
    methods: {
        onChange(event) {
            let index = event.detail;  // event.detail 的值为当前选中项的索引
            this.setData({
                active: index
            });

            // 切换tabbar页面
            wx.switchTab({
                url: this.data.list[index].pagePath,
            })
        }
    }
})

修改页面索引

需要再每个page页面中修改索引 索引是数字表示

onShow() {
    this.getTabBar().setData({
        active: 3		// 0-4
    })
}

像上面这种

//首页
onShow() {
   this.getTabBar().setData({
       active: 0		// 0-4
   })
}

//专题
onShow() {
   this.getTabBar().setData({
       active: 1		// 0-4
   })
}

//分类
onShow() {
   this.getTabBar().setData({
       active: 2		// 0-4
   })
}

//购物车
onShow() {
   this.getTabBar().setData({
       active: 3		// 0-4
   })
}

//我的
onShow() {
   this.getTabBar().setData({
       active: 4		// 0-4
   })
}