一款超级好用的 uni-app 左右滑动编辑、删除插件SwipeAction

一款超级好用的 uni-app 左右滑动编辑、删除插件SwipeAction

我们在第二期迭代的时候有一个列表页的功能需求是：左滑动出现编辑、删除 等功能，在写之前我做了一些调研，第一版我用了手写的滑动案例，在微信开发者工具测试的时候一切良好顺畅，所有的UI和功能全部打通，但是我放到了真机里面测试就非常卡顿，真的很郁闷。就在昨天下午我直接更换了用的插件库里面的 SwipeAction。经过一番研究，修改后终于搞定了。今天就分享在下面，与大家一起进步吧。

首先看一下效果图吧

1、 SwipeAction 插件下载

SwipeAction插件 ： https://ext.dcloud.net.cn/plugin?id=181#detail

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/swipe-action/swipe-action

这里我个人建议直接下载插件压缩包，解压后放入自己的组件文件夹下面，因为项目需求各不相同，所以后期可能会需要修改一些样式。

2、SwipeAction 插件使用

文件 components: 【 uni-section】、【 uni-swipe-action】、【 uni-swiper-action-item】

基本用法：

<uni-swipe-action>
    <!-- 基础用法 -->
    <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
        <view>SwipeAction 基础使用场景</view>
    </uni-swipe-action-item>
    <!-- 使用插槽 （请自行给定插槽内容宽度）-->
    <uni-swipe-action-item>
        <template v-slot:left>
            <view><text>置顶</text></view>
        </template>
        <view>
            <text >使用插槽</text>
        </view>
        <template v-slot:right>
            <view><text>删除</text></view>
        </template>
    </uni-swipe-action-item>
    <!-- 混合用法 -->
    <uni-swipe-action-item :right-options="options">
        <template v-slot:left>
            <view><text>置顶</text></view>
        </template>
        <view><text>混合使用</text></view>
    </uni-swipe-action-item>
</uni-swipe-action>

<!-- 禁止滑动 -->
<uni-swipe-action>
    <uni-swipe-action-item :disabled="true" :right-options="options">
        <view>SwipeAction 基础使用场景</view>
    </uni-swipe-action-item>
</uni-swipe-action>

<!-- 按组使用 -->
<uni-swipe-action>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view >item1</view>
    </uni-swipe-action-item>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view>item2</view>
    </uni-swipe-action-item>
    <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange($event, index)">
        <view>item3</view>
    </uni-swipe-action-item>
</uni-swipe-action>

JS部分：

⚠️： 这里可以设置按钮的样式、文案，如果需要更多的样式可以去源码中修改

export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
    }
  },
  methods:{
    onClick(e){
      console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
    },
    swipeChange(e,index){
      console.log('当前状态：'+ open +'，下标：' + index)
    }
  }
}

属性说明

leftOptions && rightOptions 参数说明

插槽

事件说明

Tips

• iOS 端由于存在bounce效果，滑动体验略差，建议禁止bounce效果，禁止方式如下：

{
    "path": "swipe-action/swipe-action",
    "style": {
        "navigationBarTitleText": "SwipeAction 滑动操作",
        "disableScroll":true,
        "app-plus":{
            "bounce":"none"
        }
    }
}

上面的内容插件市场都有，然后想要说的是对于按钮的颜色大小样式，我们可以去源码里面添加上动态的属性去操作。

第二就是按钮点击的时候 我们可以在方法里面传递不同的参数，来满足我们的循环列表点击事件。

超火?课程推荐：微信小程序 实战教程

1、uni-app快速入门 从零开始实现新闻资讯类跨端应用(含源码)完整无秘

2、纯正商业级应用-微信小程序开发实战-完整无秘

3、微信小程序云开发-从0打造云音乐全栈小程序 完整版

4、微信小程序入门与实战(最新完整版)

全部高清，无密，云盘下载