uni-app实现点击显示隐藏列表,兼容微信小程序

效果:

html 复制代码
<view class="list-item" v-for="(item,index1) in listData" :key="index1">
				<view class="item-title" @click="item.content.length>0?handleToggle(item,index1):''">
					<view class="">{{item.title}}</view>
					<u-icon :name="item.isToggle ? 'arrow-right' : 'arrow-down'"></u-icon>
				</view>
				<view class="item-content" v-show="!item.isToggle">
					<view class="content-sel" v-for="(c,index2) in item.content" :key="index2">
						{{c.title}}
					</view>
				</view>
				
</view>
javascript 复制代码
listData:[
					{
						title:"新疆",
						isToggle:false,
						content:[
							{title:"新疆大明矿业1"},
							{title:"新疆大明矿业2"}
						],
					},
					{
						title:"山东",
						isToggle:false,
						content:[
							{title:"山东矿业1"},
							{title:"山东矿业2"}
						],
					}
],
javascript 复制代码
handleToggle(item,index1){
	item.isToggle = !item.isToggle;
	console.log(item.isToggle,"item.isToggle")
}

小程序打印的结果:值一直为true

如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急!

不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。

其实解决的办法也很简单,就是要兼容两端,写出符合让两端都适合的代码 。

既然这样直接修改值不行,那就从根本出发。

javascript 复制代码
handleToggle(item,index1){
	// item.isToggle = !item.isToggle;
	this.listData.forEach((item,index)=>{
		if(index1 === index){
			item.isToggle = !item.isToggle;
		}
	})
	console.log(item,"item.isToggle")
}
相关推荐
2501_915909069 分钟前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师4 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
曹申阳5 小时前
1. 使用VSCode开发uni-app环境搭建
ide·vscode·uni-app
雪芽蓝域zzs6 小时前
uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
uni-app·apache
00后程序员张7 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
BumBle9 小时前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
会点法律的程序员9 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员9 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround10 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214313 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone