1、通过npm安装 Vant框架
npm i vant-weapp -S --production
2、引入组件到项目中
"usingComponents": {
"van-tabbar": "path/to/vant-weapp/dist/tabbar/index",
"van-tabbar-item": "path/to/vant-weapp/dist/tabbar-item/index"
}
3、固定显示在界面底部的导航栏,代码如下:
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
4、给底部导航栏显示图标,代码如下:
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search" dot>标签</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item></van-tabbar>
5、给导航栏添加自定义图标:
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item info="3">
<image slot="icon" src="{{ icon.normal }}" mode="aspectFit" />
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" /> 自定义
</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
Page({
data: {
active: 0,
icon: {
normal: '//img.yzcdn.cn/icon-normal.png',
active: '//img.yzcdn.cn/icon-active.png'
}
},
onChange(event) {
console.log(event.detail);
}
});
