minapp-slider-left's Introduction

minapp-slider-left

微信小程序左划删除组件，可能是性能最好、实现最简单的方案，使用官方组件movable-area、cover-view实现

使用指南

在小程序页面对应的 json配置中引入组件

{
 "usingComponents": {
  "slider-left": "路径组件/slider-left/index"
 }
}

即可在页面中任意位置使用：

<slider-left>hello word</slider-left>

具体参数和事件

参数说明

参数	说明	类型	默认值	必须
moveThreshold	阈值，往左移动超过则显示删除按钮，否则隐藏（一般为删除按钮宽的40%）；单位px	Number	30	NO
width	设置初始可见宽度(单位: rpx)	Number	750	NO
openWidth	可以往左拖动的最大距离,或者说是删除按钮的宽度(单位: px)	Number	75	NO
open	是否打开，true表示打开，false表示关闭;该组件有两种状态，左滑显示删除按钮时表示打开，反之关闭;通过修改该属性可以关闭或者打开组件	Boolean	false	NO

事件说明

事件名	说明	参数
change	组件状态变更后会触发	open 变更后的组件状态
delete	点击删除按钮会触发
sliderLeftStart	如果组件当前是关闭状态，开始左滑时触发（轻触摸的时候也会触发），主要用于显示当前删除按钮前先隐藏掉其它项的删除按钮

原生小程序中使用

本组件就是用官方提供的组件API开发的，没有任何依赖，参照代码片段中的使用方式使用即可

mpvue中使用

首先在mpvue项目中的static目录下，新建一个文件夹native，表示这里放原生小程序编写的组件,放在static里的东西会被直接拷贝到dist/static目录
将本库中components下的slider-left文件夹拷贝到native文件夹下
在需要使用该组件的页面对应的main.js里面，配置组件名和路径：
在页面中即可通过使用<slider-left></slider-left>标签来使用本组件了

ps: 由于mpvue目前对 Slot scoped不支持，所以用mpvue的编写的vue组件是无法在循环中使用组件的，所以这里还是用小程序官方提供的组件编写方式来编写，这样在任何第三方脚手架里均可使用;

预览

已经使用在线上项目，全程基本稳定在60fps,线上项目预览效果：
你也可以复制下面的小程序代码片段地址,打开微信开发工具,导入代码片段，即可查看效果

wechatide://minicode/fuwFLLmd7DLb

TODO

实现原理解析

minapp-slider-left's People

Contributors

Stargazers

Watchers

minapp-slider-left's Issues

movable-view是不是和下拉刷新冲突哈？

我在列表中使用了该控件后，在movable-view区域下拉刷新无效；在之外的区域可以；请问如何解决呢？谢谢。

请问该怎么实现禁止滑动呢

滑动删除按钮后再关回去。再点击其他地方，会自动弹出删除

微信版本7.0.5
2.调试库：2.6.6
3.机型:iPhone8，系统：12.3

this.data.moveInstance = this.data.openWidth - x
-      this.data.currentX = x
+      this.setData({
+        moveInstance: this.data.openWidth - x,
+        currentX:x
+      })

大概定位在这段代码(借鉴楼下老哥的代码进行修改过)，如果不进行判断open状态是否打开，再把moveInstance字段归0，等打开测滑删除的时候再关闭，点击其他地方，会自动弹出。