uni-app实现点击显示隐藏列表，兼容微信小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app实现点击显示隐藏列表，兼容微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：

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

<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>

listData:[
					{
						title:"新疆",
						isToggle:false,
						content:[
							{title:"新疆大明矿业1"},
							{title:"新疆大明矿业2"}
						],
					},
					{
						title:"山东",
						isToggle:false,
						content:[
							{title:"山东矿业1"},
							{title:"山东矿业2"}
						],
					}
],

handleToggle(item,index1){
	item.isToggle = !item.isToggle;
	console.log(item.isToggle,"item.isToggle")
}

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

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

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

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

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

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

handleToggle(item,index1){
	// item.isToggle = !item.isToggle;
	this.listData.forEach((item,index)=>{
		if(index1 === index){
			item.isToggle = !item.isToggle;
		}
	})
	console.log(item,"item.isToggle")
}

uni-app实现点击显示隐藏列表，兼容微信小程序,小程序,javascript,uni-app,uni-app,微信小程序文章来源地址https://www.toymoban.com/news/detail-696631.html