微信小程序-wepy-侧滑删除组件，支持自定义内容区在-优快云博客

本文介绍了一款针对微信小程序的侧滑删除组件，适用于wepy框架，支持自定义内容区域、滚动高度及菜单，提供了左右滑动功能，并详细解释了组件的使用方式和配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最近的微信小程序开发过程中需要用到侧滑删除的功能，微信小程序官方是没有提供这样的组件，再加上我们的微信小程序使用的是wepy组件开发框架开发的，wepy也没有提供这样的组件，之前也在github上搜索这方面的组件，没有发现合适的，当时只发现了一个开源的:github.com/GeoffZhu/we… 只不过该组件功能单一已经被作者废弃了，无奈自己动手撸了一个侧滑删除组件，现在把它开源出来吧。

传送门:github.com/hu670014125…

Requirements

wepy: "^1.7.3"

支持功能和特点

自定义内容区域：支持之定义内容区域，组件内使用 slot占位。
自定义滚动高度：可以自定义scroll-view的高度，默认为屏幕的高度。
自定义menu ：如果默认的menu样式不喜欢可以自定义，也可以显示或者隐藏指定的menu。
左右滑动：支持左右滑动也可以设置只左右或者右滑。

效果如下：

如何使用

目前支持两种使用模式：

1.page页面模式

优点：可定制化高，扩展性强。
缺点：集成复杂，代码复用性差。复制代码

2.component 组件模式

优点：集成简单，代码复用性强，减少包的大小。
缺点：可定制到低。复制代码

不建议使用page页面模式，下面详细介绍component 组件模式的使用

如何使用

// 导入组件
import SwipeDeleteView from '@/components/wepy-swipe-delete-view'

// 声明组件

 components = {
      swipeDelete: SwipeDeleteView
    }
    
  // 引用组件
  <template>
  <swipeDelete :list.sync="list">
      <view class="item">{{item.userName}}</view>
    </swipeDelete>
  </template>复制代码

配置如下：

<swipeDelete   :list.sync="list"
               :scrollHeight="scrollHeight"
               @deleteTap.user="deleteTap"
               @deleteLongTap.user="deleteLongTap"
               @editTap.user="editTap"
               @editLongTap.user="editLongTap"
               @addTap.user="addTap"
               @addLongTap.user="addLongTap"
               @markTap.user="markTap"
               @markLongTap.user="markLongTap">复制代码

属性	属性说明	备注
list	要显示的列表的原始数据，最好是加上.sync这样可以异步传值	必传
scrollHeight	设置scroll-view的高度，默认为屏幕高度	选传
deleteTap.user	删除menu单击事件回调	必要时传
deleteLongTap.user	删除menu长按事件回调	必要时传
editTap.user	编辑menu单击事件回调	必要时传
editLongTap.user	编辑menu长按事件回调	必要时传
addTap.user	添加menu单击事件回调	必要时传
addLongTap.user	添加menu长按事件回调	必要时传
markTap.user	标记menu单击事件回调	必要时传
markLongTap.user	标记menu长按事件回调	必要时传

每个点击事件或者长按事件都会返回两个参数

methods = {
      deleteTap(view, item) {
        console.log(item)
        view.deleteItem()
      },
      deleteLongTap(view, item) {
        console.log(item)
        wx.showModal({
          title: '提示',
          content: '确定要删除吗？',
          success: function (res) {
            if (res.confirm) {
              view.deleteItem()
            } else {
              view.closeItem()
            }
          }
        })
      }
   }复制代码

view ：view 是SwipeDeleteView对象的本身，可以通过view来做一些其他操作，如:删除当前的item
item : item 就是当前操作的原始数据，可以通过item获取真正需要的数据

当前SwipeDeleteView对外暴露的函数有：

函数名称	函数说明	参数
deleteItem	删除当前操作的item(原始数据+view)都会被删除	不需要参数
closeItem	关闭当前操作的item，原始数据不变	不需要参数

网络异步加载更新

如果使用的网络异步加载完成以后，还需要更新下组件，不然会出现无法侧滑的情况。

导致原因：原始数据更新以后组件内部无法监听到，这样就不能获取到左右menu的宽度，所以不能侧滑
解决办法：this.$invoke('swipeDelete', 'update'); swipeDelete必须和 components = {swipeDelete: SwipeDeleteView} 同名。

代码如下：

// 模拟网络加载延迟2秒钟
   let that = this
     setTimeout(function () {
       for (let i = 0; i < 20; i++) {
         let msg = {}
         msg.userName = '' + '用户' + (i + 1)
         msg.msgText = '您有新的消息'
         msg.color = that.buildRandomColor()
         msg.height = that.buildRandomHeight()
         msg.headerImg = options.avatarUrl
         that.list.push(msg)
       }
       wx.hideLoading()
       // 更新组件
       that.$invoke('swipeDelete', 'update')
       that.$apply()
     }, 2000)复制代码