微信学习之导航功能_vant grid-CSDN博客

本文链接：https://blog.csdn.net/cau_eric/article/details/148062848

先看这个功能的效果：

然后开始学习吧。

一、我们这里用的是vant的Grid控件，首先我们导入：

{  
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "my-swiper":"../../components/swiper/swiper",
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index",
    "van-icon": "@vant/weapp/icon/index"
  }
}

二、在页面上加入布局：

<view class="nav">
    <van-grid column-num="4">
      <van-grid-item icon-color="{{ item.color }}" icon="{{ item.icon }}" text="{{ item.text }}" wx:for="{{ navData }}" />
    </van-grid>
  </view>

三、给控件提供数据：

navData:[
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        },
        {
          text:'数码',
          icon:'like',
          color:'#ff0000'
        }
      ]

好了，完成了。

其中，显示文字(text)，对应图标（icon），还有图标的颜色（color）都可以随便改动.。

最后，看一下到目前的效果：