Vue导航栏
用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了）
1、首先把这些小图片放到src/assets路径下面（自动base64编码）
2、在data（）里边定义一个选中对应的变量isSelect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。 注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显示不出图片的情况，而且打包之后，还是这里地址，不会变。使用webpack提供的require引入图片地址就可以解决以上问题。
data () {
return {
isSelect: '首页',
nav: [
{title: '首页', url: require('../../assets/common/首页@2x.png'), url_one: require('../../assets/common/首页_active@2x.png')},
{title: '店铺', url: require('../../assets/common/店铺@2x.png'), url_one: require('../../assets/common/店铺_active@2x.png')},
{title: '创业直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播_active@2x.png')},
{title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')}
]
}
},
html遍历这个nav数组，并且给每个li注册点击事件selectNav()，参数就是title。
<ul>
<li v-for="item in nav" @click="selectNav(item.title)">
<img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title">
<p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p>
</li>
</ul>
在methods中定义这个事件
methods: {
selectNav (title) {
this.isSelect = title
}
3、这个方法里还可以根据title的值去跳转到相应的路由，这样一个基本的底部导航栏就是实现了。
methods: {
selectNav (title) {
this.isSelect = title
switch (title) {
case '首页': this.$router.push('/index')
break
case '店铺': this.$router.push('/shop')
break
case '创业直播': this.$router.push('/live')
break
case '我的': this.$router.push('/my')
break
}
sessionStorage.setItem('isSelect', this.isSelect)
}
}
内容版权声明：除非注明，否则皆为本站原创文章。