uniapp实现固定导航循环更改样式更改页面

灰太狼 2022-12-31 05:26 177阅读 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