首先设置footer 利用v-if v-else加上选择器 进行条件置换 在footer内部样式里面设置图片大小背景即可
html代码
<view class="" @click="topage2">
<view class="foot_item1" v-if="page_id==1">
<image class="foot_item1_image" src="../static/pc2.png" mode="">image>
<view class="foot_item1_text" :class="{'red' :page_id==1}">
首页
view>
view>
<view class="foot_item1" v-else @click="page_to(1)" >
<image class="foot_item1_image" src="../static/pc2_1.png" mode="">image>
<view class="foot_item1_text" :class="{'red' :page_color==1}">
首页
view>
view>
view>
<view class="" @click="topage2">
<view class="foot_item2" v-if="page_id==2">
<image class="foot_item1_image" src="../static/pc8_1.png" mode="">image>
<view class="foot_item1_text">
在线学习
view>
view>
<view class="foot_item2" v-else @click="page_to(2)">
<image class="foot_item1_image" src="../static/pc8.png" mode="">image>
<view class="foot_item1_text">
在线学习
view>
view>
view>
<view class="foot_item3">
<image class="foot_item1_image1" @click="page_to(3)" src="../static/pc4.png" mode="">image>
view>
<view class="" @click="topage3">
<view class="foot_item4" v-if="page_id==4">
<image class="foot_item1_image" src="../static/pc9_1.png" mode="">image>
<view class="foot_item1_text">
培训中心
view>
view>
<view class="foot_item4" v-else @click="page_to(4)">
<image class="foot_item1_image" src="../static/pc9.png" mode="">image>
<view class="foot_item1_text">
培训中心
view>
view>
view>
<view class="" @click="topage4">
<view class="foot_item5" v-if="page_id==5" >
<image class="foot_item1_image" src="../static/pc10_1.png" mode="">image>
<view class="foot_item1_text">
我的
view>
view>
<view class="foot_item5" v-else @click="page_to(5)">
<image class="foot_item1_image" src="../static/pc10.png" mode="">image>
<view class="foot_item1_text">
我的
view>
view>
view>
view>
js部分
page_to(index){
localStorage.setItem('page_id',index)
localStorage.setItem('page_color',index)
if(index==1){
uni.navigateTo({
url:""
})
this.page_id=index
this.page_color=index
}else if(index==2){
uni.navigateTo({
url:""
})
this.page_id=index
this.page_color=index
}else if(index==3){
uni.navigateTo({
url:""
})
this.page_id=index
this.page_color=index
}else if(index==4){
uni.navigateTo({
url:""
})
this.page_id=index
this.page_color=index
}else if(index==5){
uni.navigateTo({
url:""
})
this.page_id=index
this.page_color=index
}
}
}
0条评论