真是怪事年年有, 今年特别多, uni-swipe-action 滑动操作组件,
Android 好好的 iOS 几款手机都会出现事件传递
uni-swipe-action-item 套 view, click事件给了uni-swipe-action-item 里面的view click 也触发了
1. 场景代码如下:
<uni-swipe-action>
<uni-swipe-action-item v-for="(item,index) in agendaList" :key="index"
:disabled="isUpdateOrDel(item)" :right-options="options" @change="handleSwipe"
@click="swipeClick($event,index)">
<view @click="toDetail(item)">
</view>
</uni-swipe-action-item>
</uni-swipe-action>
2. 怎么能阻止事件传递 (事件修饰符):
3.事件修饰符
虽然事件修饰符, .stop 和 e.stopPropagation 等同, 但uniapp 里 不好使, 只能用修饰符
4. 改源码
你用左滑 就改class 为 --left 的
右滑就搞 --right的
其次就是
touchend
touchstart
加上修饰符.stop
<view class="uni-swipe_button-group button-group--right">
<slot name="right">
<view v-for="(item,index) in rightOptions" :key="index" :style="{'z-index':999,
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
}" class="uni-swipe_button button-hock" @touchstart.stop="appTouchStart"
@touchend.stop="appTouchEnd($event,index,item,'right')"
@click.stop="onClickForPC(index,item,'right')"><text class="uni-swipe_button-text"
:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
</view>
</slot>
</view>
5.错误的改法就是把click 搞成 click.stop ;
我头一次也这么想的, 不过控制台提示,包装的click是方法 不是事件… 不支持
<uni-swipe-action>
<uni-swipe-action-item v-for="(item,index) in agendaList" :key="index"
:disabled="isUpdateOrDel(item)" :right-options="options" @change="handleSwipe"
@click="swipeClick($event,index)">
<view @click="toDetail(item)">
</view>
</uni-swipe-action-item>
</uni-swipe-action>