微信学习之导航功能

先看这个功能的效果：

然后开始学习吧。

一、我们这里用的是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）都可以随便改动.。

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