解决小程序多层嵌套点击事件重复或者失效问题

解决小程序多层嵌套点击事件重复或者失效问题

问题描述:当列表有多层级分类,包含关系,且每层上都有点击事件,这时候点击父组件会触发子组件时间,或者点击子层级的也会触发父层级的点击事件,多次触发。
解决描述:bindtap 和catchtap 点击事件。在父级使用bindtap,在子组件使用catchtap进行冒泡时间阻断处理
例子:

<view class="chooseList" wx:for="{{item.brands}}" wx:key="index" bindtap="rotateAnim" data-item="{{item}}" data-index="{{index}}">
	<view style="display: flex;">
		<view class="chooseListL">
			<view class="chooseListLCon">
				<image src="{{carImgUrl}}{{item.image}}"></image>
			</view>
		</view>
		<view class="chooseListR {{curClass.gcName === item.brandName? 'cur':''}}">{{item.brandName}}</view>
	</view>
	<!-- 二级菜单-厂商 -->
	<view hidden="{{item.childShow}}" class="chooseCarChild">
		<view class="factoryName" wx:for="{{item.factoryList}}" wx:key="{{item.factoryid}}" data-item="{{item}}" catchtap="setCarChild">
			<view class="{{curClass.gcName === item.factoryName? 'cur':''}}">{{item.factoryName}}</view>
		</view>
	</view>
</view>

版权声明:本文为qq_38194393原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。