需求:底部导航切换页面,同时切换图片。底部为公共组件
组件代码:
<div class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :class="{active:index == thatnum}" @click="addClassName(index)">
<router-link :to="i.url">
<img v-if="thatnum!=index" :src="i.img" class="first weui-tabbar__icon">
<img v-if="thatnum==index" :src="i.active" class="last first weui-tabbar__icon">
<p class="weui-tabbar__label">{
{i.text}}</p>
</router-link>
</a>