uview2 swipeAction 自定义关闭事件

文章介绍了在uview2框架中使用swiperAction组件时如何实现操作后关闭打开的item,由于uview2未提供直接的API,作者提供了两种解决方案:一是修改源码添加closeAll方法;二是不修改源码,利用swiper-action-item的内置关闭方法。并给出了具体的代码示例。
摘要由CSDN通过智能技术生成

##当我们使用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>

注:这里没有判断滑动方向方法,只要滑动(其他的上下左右,自身滑动不影响)就执行关闭,有需要的自己实现

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值