微信小程序左滑删除功能开发案例

sydMobile 发布于2019-08-23 13:02 / 3284人阅读

摘要：当我们手指向左滑动时，容器向左移动此时从容器之后显示出来换句话说我们喜欢容器盖住，使默认在上方。接着我们给元素添加，这样它就能获得移动的距离。详细案例请搜索微信小程序魔都源码地址

直接进入正题，我们需要做的就是通过手指滑动列表项后，右侧出现删除；
比如说像这样：

向左边滑动后出现如下的效果：

开始撸代码～
假设我们有N个列表项来自一个数组list，先确定基本的结构


    
        {{item}}
        删除

在item中分别放入wrap作为显示项目内容的容器，与delete删除按钮的容器。
当我们手指向左滑动wrap时，wrap容器向左移动；此时delete从wrap容器之后显示出来；换句话说我们喜欢wrap容器盖住delete，使wrap默认在delete上方。
没错，我们用样式来实现效果。

.item{ position:relative; }
.wrap{ 
  position:absolute;z-index:2; top:0;left:0;
  backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}

好了，这些我们需要的核心样式，为了wrap能100%盖住delete，我们给到它宽高都是百分之百，并且填充背景颜色是必然的，至于要怎么美化可自行添加需要的样式。
基本的结构就到这里了，接下来我们为wrap添加触摸事件；

{{item}}

我们绑定了三个触摸事件，分别是，触摸开始，触摸时移动以及触摸结束。
同时有个wrap添加了data-index="{{index}}" 这样我们就可以确定当前触摸的列表项是哪一个。
接着我们来为他们添加对应的方法。

  touchstart:function(e){
    this.setData({
      index: e.currentTarget.dataset.index,
      Mstart: e.changedTouches[0].pageX
    });
  }

通过touchstart方法我们将当前触发事件元素的索引保存到index，并且获得当前手指触摸的坐标位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX
屏幕的左上角的坐标为(0,0)，离左上角的距离越大pageX的值也越大。

下一步，当我们移动手指向左滑动时：

  touchmove: function (e) {
    //列表项数组
    let list = this.data.list;
    //手指在屏幕上移动的距离
    //移动距离 = 触摸的位置 - 移动后的触摸位置
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    // 这里就使用到我们之前记录的索引index
    //比如你滑动第一个列表项index就是0，第二个列表项就是1，···
    //通过index我们就可以很准确的获得当前触发的元素，当然我们需要在事前为数组list的每一项元素添加x属性
    list[this.data.index].x = move > 0 ? -move : 0;
    this.setData({
      list: list
    });
  }

当移动后的触摸位置小于最初触发的位置时，说明手指是向左滑动，因为pageX越小就越向屏幕边缘靠近；这个时候move就是wrap容器需要向左移动的距离。
我们重写list[this.data.index].x的值，并且将原有的list覆盖，这样我们在滑动的时候就能实时的看到元素跟随手指移动的效果；
这个时候我们可以发现，我们一直往左边移动，wrap元素就会被推到屏幕的边缘；这很明显不是我们想要的效果，我们希望滑动到一定距离后就停止滑动，于是我们为其添加最后一个方法；

  touchend: function (e) {
    let list = this.data.list;
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    list[this.data.index].x = move > 100 ? -180 : 0;
    this.setData({
      list: list
    });
  },

我们看到这个方法唯一的不同的地方是这一行

list[this.data.index].x = move > 100 ? -180 : 0

意思是当手指离开元素时，如果移动的距离大于100，那么元素将自动向左移动到180的距离，如果小于100那么元素将向右恢复。
接着我们给wrap元素添加style，这样它就能获得移动的距离x。
至于为什么要移动距离要除以2，这个跟小程序使用rpx单位有关系；
之前我们写100，-180是像素px，需要换算成rpx；
微信小程序开发尺寸单位文档

设备    rpx换算px (屏幕宽度/750)    px换算rpx (750/屏幕宽度)
iPhone5,1rpx = 0.42px,1px = 2.34rpx
iPhone6,1rpx = 0.5px,1px = 2rpx
iPhone6 Plus,1rpx = 0.552px,1px = 1.81rpx

我们看到基本是2倍的比例；

{{item}}

最后我们使用样式为wrap元素添加过渡效果就基本完成了。

详细案例请搜索微信小程序：52魔都

源码地址：https://github.com/749264345/...

云服务器 GPU云服务器微信小程序案例微信小程序功能微信小程序的功能微信小程序有什么功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99171.html

微信小程序——商城篇

摘要：微信小程序之跳转在进入商品详情页以后，点击左下角的图标原应该跳转到首页，但是一直点也不跳，而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话，要按业务需求来。前言随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各...

k00baa 2019-08-26 12:01 评论0 收藏0
小程序开发：左滑删除

摘要：，上层使用绝对定位，我们操纵属性的值来实现像左移动。，我们通过微信小程序提供的对象和个有关手指触摸的函数，，来实现随手指移动。省略数据删除部分中根据绑定的事件触发删除按钮，用户点击删除，发送请求，根据返回值对用户进行反馈。导语首先声明两点：思路以及代码，是根据资料进行一些修改以及补充，原文地址在此下面的只是 demo，各位根据自己的需要进行修改完善实现的思路摘抄如下 1...

missonce 2019-07-01 11:14 评论0 收藏0
小程序左滑删除如何实现

摘要：微信小程序如何实现左滑删除的功能呢左滑删除组件，基础库开始支持，如下图所示。微信小程序如何实现左滑删除的功能呢 https://developers.weixin.qq.... https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html Slideview左滑删除组件，基础库 2.4.4 ...

ChristmasBoy 2019-08-26 18:42 评论0 收藏0
写一个微信小程序侧滑删除组件

摘要：今天就遇到一个需要，删除操作，按照微信的交互做一个。剩下的可以看看这个代码，微信小程序侧滑删除编辑一些小问题在滑动的时候，貌似最小需要像素才会响应，是不是我的姿势有点问题。原文阅读写一个微信小程序侧滑删除组件背景最近一直在断断续续做一个小程序的项目，看起来很小，但一直没正经做过小程序，所有没啥积累，什么东西都要自己写一遍。今天就遇到一个需要，删除操作，按照微信的交互做一个。向左...

宋华 2019-08-22 18:02 评论0 收藏0
从0到1：微信小程序自选股项目回忆录

摘要：小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只为等待小龙宣布号小程序正式发布的到来。第一次被微信开放平台开发二组团队小程序项目团队当小白鼠各种实验新特性。。导语：我很喜欢小龙的一句话，微信因你而变。是的，把事情做到极致的时候，这个世界就会因你而变。小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只...

feng409 2019-08-20 13:36 评论0 收藏0