uView的swipe-action组件在实际开发中遇到的问题

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的编码爱好者
大家好，我是全栈 IT 工程师摘星人
欢迎分享 / 收藏 / 赞 / 在看！

uView 官网 - SwipeAction 滑动单元格
【需求】每一项可以左滑，点击删除该项

【问题1】向左滑动，其他的项不能关闭
【解决】v-for 要在 u-swipe-action-item 层进行，并且 key 要唯一（最好不要用索引 index）

<u-swipe-action>
    <u-swipe-action-item v-for="item in dataLists" :key="item._id" :options="optionsSwipe" @click="clickSwipe(item)" :name="item._id">
        <view class="item item-bg"  @click="clickItem(item._id)">
            <view class="top">
                <view class="title">
                    {{item.title}}
                </view>
            </view>
        </view>
    </u-swipe-action-item>
</u-swipe-action>

【问题2】点击删除后，删除按钮不能自动关闭
【解决】修改组件源码
修改 u-swipe-action-item.vue 代码，找到 buttonClickHandler 事件，添加 this.status = 'close'。即点击按钮后将状态置为 close。