uni-app开发微信小程序右滑删除功能_uniapp 右滑删除

在日常开发中，右滑删除项这个功能是很常见的，如下图所示

该功能如何实现，在uni-app官方文档中有告诉我们使用插件uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/uniui/uni-swipe-action.html#

该怎么使用呢？

1、下载插件导入 HBuilder X

 下载链接为uni-swipe-action 滑动操作 - DCloud 插件市场

2、使用插件内置标签 

<uni-swipe-action>
    //:right-options为右滑 :left-options为左滑 可以根据需求添加
	<uni-swipe-action-item :right-options="options" @click="onClick()">
	    <view>这里放我们默认展示的模块</view>
	 </uni-swipe-action-item>
</uni-swipe-action>

3、编写options变量 

export default {
    data(){
        options:[
			{
			   text: '删除',
			   style: {
				  backgroundColor: '#dd524d'
		       }
		    }
		]
    },
    methods:{
        onClick(){
            //处理逻辑操作（点击删除）
        }
    }
}

看最终效果：