##当我们使用uview2的swiperAction时,需要实现操作后关闭打开的item,在uview2中没有对应的api,可能是考虑优化的问题没有集成关闭全部的功能,也没有集成滑动成功的回调方法,
而在uview1中存在集成滑动的方法回调 open
所有这里可以根据uview1实现的两种实现方式
第一种,修改uview2源码,加一个closeAll 方法,最简单,但是不适合多人办公
closeAll() {
// 历遍所有的单元格,进行关闭
this.children.map((item, index) => {
item.closeHandler()
})
}
使用
<u-swipe-action ref='swipeAction'>
......
</u-swipe-action >
methods:{
//方法使用
closeAll(){
this.refs.swipeAction.closeAll()
}
}
第二中,不修改源码 ,如下图所示,swiper-action-item 自带关闭方法,调用它就行
<template>
<div>
<u-swipe-action :autoClose="false">
<u-swipe-action-item @touchmove="move(index)" :ref="'swipeAction' + index" v-for="(item, index) in list"
:options="options1" :key="index">
.....
</u-swipe-action-item>
</u-swipe-action>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
options1: [{
// text: '删除'
icon: 'setting-fill',
iconSize: "28",
style: {
backgroundColor: '#F5F5F5',
color: 'black',
}
}],
moveIndex: -1, //用于记录滑动下标
};
},
methods: {
move(index) {
if (this.moveIndex == index) return
this.closeSwipeAction()
this.moveIndex = index
},
closeSwipeAction() {
let test = 'swipeAction' + this.moveIndex
if (this.moveIndex != -1) {
this.$refs[test][0].closeHandler()
}
},
},
};
</script>
<style lang="scss" scoped></style>
注:这里没有判断滑动方向方法,只要滑动(其他的上下左右,自身滑动不影响)就执行关闭,有需要的自己实现