//在循环中加入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>
2 个回复
uni创意插件 - uni创意插件
//在循环中加入ref属性,然后调用重置所有方法,示例代码如下
加旋仔 (作者)
谢谢