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")
}
相关推荐
小周同学:5 小时前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
難釋懷6 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c6 小时前
微信小程序核心知识点速览
微信小程序·小程序
书山有路勤为径~7 小时前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_4244091919 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_9159184119 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手21 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_121 小时前
搭建商城系统
java·uni-app·php
合作小小程序员小小店1 天前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏1 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue