持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

Vant Weapp中引入van-tabs组件

• 在主页面中我们需要使用分类导航组件，而在vant weapp中我们有现成的供我们使用，组件链接：youzan.github.io/vant-weapp/…

• 然后在app.json中引入组件，每一个组件的使用都需要引入到json文件中。因为之前刚开始引入vant weapp组件库的时候，我选择的是全局引入，所以之后使用每一个组件的时候，我都不需要一个一个去引入组件，全局引入的具体做法可以参考vant weapp官网的快速上手部分，网址链接：youzan.github.io/vant-weapp/…

引入完后再在页面内使用

组件引入成功之后我们在wxml文件中使用，结合之前我们调用云函数获取的商品数据，我们index.wxml中的代码如下：

    <van-tab title="板块一">
      <block wx:for="{{releaseData}}" wx:key="_id">
          <image class="datailImv2" src="{{item.picture}}"></image>
          <text class="detailTxt2">{{item.title}}</text>
          <view>
            <van-tag round type="primary" style="margin-left: 50rpx;">{{item.detail}}</van-tag>
          </view>
            <van-tag type="danger">{{item.address}}</van-tag>
</block>

板块内的内容根据自己的需求而改变，我只弄了板块一的内容，主要包括一个商品的图片以及名称，详细情况和卖家的地址等等。

这里大量的使用了vant weapp中的组件，并且使用了wx-for循环渲染了releaseData中的数据，方便了我们进行数据的编写和填充。

到此，我们的主页面引入的导航标签栏就使用成功了，具体的展示效果如下图：