uni-app 实现滑动操作:左滑删除

1,342 阅读1分钟

效果展示

image.png

实现步骤

第一步 下载插件

下载地址:uni-swipe-action 滑动操作 - DCloud 插件市场

image.png

下载后选择对应的项目

image.png

第二步:直接上手写代码

<uni-swipe-action>
  <uni-swipe-action-item :left-options="options1" @click="onClick" @change="change">
   <view>未滑动之前显示的内容</view> 
  </uni-swipe-action-item> </uni-swipe-action>
 options1:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '编辑',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
 methods: {
            bindClick(e) {
                uni.showToast({
                    title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
                    icon: 'none'
                });
            },
            swipeChange(e) {
                console.log(e);
            }


        }