uniapp实现固定导航循环更改样式更改页面 灰太狼 2022-12-31 05:26 143阅读 0赞 实现效果如下: ![在这里插入图片描述][20201228165828331.png] 点击某个盒子后 更改蓝色字体 并且只显示 属于该数字的盒子 分析: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70] 代码如下: <template> <view class="content"> <view style="display: flex;width: 100%;"> <view style="width: 20%;text-align: center;" v-for="(i,index) in title" :key="index" @click="chooseid(index)" :class="{'cblue':idnum==index+1}"> { { i.name}} </view> </view> <view v-show="idnum==1"> 1 </view> <view v-show="idnum==2"> 2 </view> <view v-show="idnum==3"> 3 </view> <view v-show="idnum==4"> 4 </view> <view v-show="idnum==5"> 5 </view> </view> </template> <script> export default { data() { return { idnum:1, title:[{ name:"数字1", id:1 }, { name:"数字2", id:2 }, { name:"数字3", id:3 }, { name:"数字4", id:4 }, { name:"数字5", id:5 }] } }, onLoad() { }, methods: { chooseid(index){ this.idnum=index+1; console.log(this.idnum) } } } </script> <style> .cblue{ color: #007AFF; } </style> [20201228165828331.png]: /images/20221120/d4bf1a05abe243cb98184d291c16b298.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDA4MDcw_size_16_color_FFFFFF_t_70]: /images/20221120/e002055350b5479d8d7751762622ed77.png
还没有评论,来说两句吧...