加旋仔
加旋仔
  • 发布:2023-05-31 11:33
  • 更新:2023-06-26 09:29
  • 阅读:231

#插件讨论# 【 滑动操作、左滑删除、滑动删除 - 长江长江 】请问点击滑动时,如何把所有的已划开的按钮都重置

分类:uni-app

请问点击滑动时,如何把所有的已划开的按钮都重置

2023-05-31 11:33 负责人:无 分享
已邀请:
uni创意插件

uni创意插件 - uni创意插件

//在循环中加入ref属性,然后调用重置所有方法,示例代码如下

<template>  
    <view class="slide-main">  
        <view class="list" v-for="(item,index) in list" :key="index">  
            <liu-swipe-action :ref="'ref'+index" :index="index" @clickItem="clickItem">  
                <view class="item">  
                    <image class="item-img" src="https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png">  
                    </image>  
                    <view class="item-name">{{item}}</view>  
                </view>  
            </liu-swipe-action>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条']  
            }  
        },  
        methods: {  
            //点击操作回调事件  
            clickItem(e) {  
                console.log('所点击的列表索引:' + e.index)  
                console.log('所点击的按钮id:' + e.id)  
            },  
            //重置所有  
            reset() {  
                this.list.forEach((res, index) => {  
                    this.$refs['ref' + index][0].reset()  
                })  
            }  
        }  
    }  
</script>  

<style scoped>  
    .slide-main {  
        width: 100%;  
        height: 100vh;  
        background-color: #f0f0f0;  
    }  

    .list {  
        width: 100%;  
        margin-top: 1px;  
    }  

    .item {  
        width: 100%;  
        height: 120rpx;  
        display: flex;  
        align-items: center;  
        justify-content: flex-start;  
    }  

    .item-img {  
        width: 80rpx;  
        height: 80rpx;  
        border-radius: 50%;  
        margin-left: 28rpx;  
    }  

    .item-name {  
        margin-left: 16rpx;  
        font-size: 30rpx;  
        color: #666666;  
    }  
</style>
加旋仔

加旋仔 (作者)

谢谢

要回复问题请先登录注册