微信小程序中想要实现类似于下图中的

image.png

第一种方法：可以使用微信开放文档中的自定义tabbar来实现
第二种方法：使用vant组件中的van-tabbar
本次主要讲解第二种方法：
我们需要在一个index页面中，写下如下代码

wx.html
<view class="pageContent">
    <index bind:changePage='changePage' wx:if='{{active == 0}}' id="index" storeId='{{storeId}}'></index>
    <icard id="icard" wx:elif='{{active == 1}}'></icard>
    <my wx:elif='{{active == 2}}'></my>
  </view>
  <van-tabbar active="{{ active }}" active-color="#0f429e" inactive-color="#bbbbbb" bind:change="onChange">
    <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
    <!-- <van-tabbar-item icon="points">积分兑换</van-tabbar-item> -->
    <van-tabbar-item>
      <image slot="icon" src="{{ icon.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
      <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
      积分兑换
    </van-tabbar-item>
    <van-tabbar-item icon="manager">我的</van-tabbar-item>
  </van-tabbar>

js
data:{
 active:0,
    icon:{
      normal:'图片',
      active:'图片'
    },
},
// 当前标签选中的索引值
  onChange(e){
   console.log(e);
   this.setData({
     active:e.detail
   })
  },

json
"usingComponents": {
    "index":"/components/index/index",
    "icard":"/components/icard/index",
    "my":"/components/my/index"
  }

其他的如果需要跳转到这个地方的，传进去一个参数active，在总的index页面的onLoad种接收一下

if (options.active) {
      this.setData({
        active: Number(options.active)
      })
    }