一款超级好用的 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)
    }
  }
}

属性说明

属性名 类型 默认值 是否必填 说明
show String none 开启关闭组件,auto-close = false 时生效,可选值,left\right\none
threshold Number 20 滑动阙值
disabled Boolean false 是否禁止滑动
autoClose Boolean true 其他组件开启的时候,当前组件是否自动关闭 【注意:长列表使用会有性能问题】
leftOptions Array 左侧选项内容及样式
rightOptions Array 右侧选项内容及样式

leftOptions && rightOptions 参数说明

参数 类型 是否必填 说明
text String 按钮的文字
style Object 按钮样式{backgroundColor,color,fontSize},backgroundColor默认为:#C7C6CD,color默认为:#FFFFFF,fontSize默认为:14px

插槽

名称 说明
默认插槽自定义显示内容
left 左侧滑动内容 ,会覆盖 leftOptions 内容
right 右侧滑动内容 ,会覆盖 rightOptions 内容

事件说明

事件称名 说明 返回参数
@click 点击选项按钮时触发事件 e = {content,index} ,content(点击内容)、index(下标)、position (位置信息)
@change 组件打开或关闭时触发 left:左侧 ,right:右侧,none:关闭

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、微信小程序入门与实战(最新完整版)

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

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏