uni-app动态切换样式

最新推荐文章于 2024-04-15 16:48:51 发布

原创最新推荐文章于 2024-04-15 16:48:51 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

本文介绍如何使用JavaScript动态地根据用户点击事件，通过数组操作切换Vue组件的样式。通过`indexOf()`判断样式状态，利用`push()`和`splice()`管理活跃卡片索引，实现实时响应和样式切换。

一、动态反复切换样式

//indexOf():返回括号内的索引号，如果没找到，返回值等于-1
//push():追加数组
//splice():删除数组
//1.创建两个数组，一个数组装着原样式，另一个数组为空，装着点击样式。
//2.给点击事件传递index参数，用index代表原样式的每一项。
//3.if-else语句

<view class="status">
				<!-- 当前状态：current ，失败:fail，成功:success,锁住 locked-->
				<view class="statusCard" v-for="(item, index) in statusCard" :key='index'>
					<image 
					:src="item.successUrl" 
					:class="index===activeCardIndex.indexOf(index)!=-1?'currentimg':' '" 
					@click="navigateCard(item.navigateUrl,index)"
					>
					</image>
				</view>
			</view>

	navigateCard(url,index){
				if(url!=" "){
					var that = this;
					uni.navigateTo({
						url:url
					})
					if(this.activeCardIndex.indexOf(index)==-1){
						this.activeCardIndex.push(index)//如果选中的在activeCardIndex中找不到，就追加进去，切换样式
						// console.log(this.activeCardIndex)
					}
					else{
					this.activeCardIndex.splice(this.activeCardIndex.indexOf(index),1)//按下确定或取消，把activeCardIndex中的选中的，去除，从而切换样式
					}
				}
			}