Vue vant如何固定底部导航栏

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); 

  } 

});