摘要：今天就遇到一个需要，删除操作，按照微信的交互做一个。剩下的可以看看这个代码，微信小程序侧滑删除编辑一些小问题在滑动的时候，貌似最小需要像素才会响应，是不是我的姿势有点问题。原文阅读写一个微信小程序侧滑删除组件
背景
最近一直在断断续续做一个小程序的项目，看起来很小，但一直没正经做过小程序，所有没啥积累，什么东西都要自己写一遍。
今天就遇到一个需要，删除操作，按照微信的交互做一个。
向左滑动，显示删除按钮，并且，是动画、过渡的打开，左滑一丢丢并不会打开，大概 10 像素的时候才出发打开。左右滑动的时候，展开的程度和手指滑动贴合。最后手指滑动的方向决定打开还是关闭，并非起点与终点的方向。
思路既然要贴合手指的滑动，必然与 touchstart、touchmove、touchend 有关系。
移动的效果，CSS 3 中的 2D 转换 transform: translateX(0px) 蛮合适的，只需要一个值就可以了。
首先，在 touchstart 标记起点，在 touchmove 的时候不断计算当前元素应该在哪个位置，touchend 时把状态归位、判定结果。
在 touchmove 中不断元素计算当前位置，手指起点、手指当前点可以计算出当前移动的距离，再与元素的起点结合，可以得到当前元素的位置。但元素的位置时刻都是变化的，需要一个当前元素点的副本。元素的位置也会在一个范围内移动，不能超过了范围。
在 touchend 中更新元素副本的数据，为下次滑动做准备。
最后手指滑动的方向是比较细腻的判定，需要结束滑动那一刻的状态，于是，每次滑动的时候，记录一组滑动的数组，取最后两位的值做判定。
删除
{
data: {
transitionTime: 0, // 过渡时间
translateX: 0, // 当前元素位置
__currentX:0, // 内部使用，当前元素位置的副本
__lastXs: [], // 内部使用，记录上一个x
__startX: 0, // 内部使用，开始的X
}
}
基本的雏形已经有了。
touchstart 中，标记起点 X，并且初始化 __lastXs，并添加第一个移动坐标。
touchmove 里面不断向 __lastXs 添加值，通过起点的 X 和当前的 X 更新元素的位置，并且做临界值的判断。手指滑动的时候，跟随状态，所以并不需要过渡。
touchend 里面做最有的判定，例如方向、最后的元素位置、过渡时间等。
按照以上方式做，sideslip-content 这边的交互已经完成了，接下来结合一些计算方式，把按钮昨晚就好了。
剩下的可以看看这个代码，微信小程序 侧滑删除、编辑
一些小问题在滑动的时候，貌似最小需要 16 像素才会响应，是不是我的姿势有点问题。
原文阅读：写一个微信小程序侧滑删除组件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95421.html
摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...
摘要：微信小程序之跳转在进入商品详情页以后，点击左下角的图标原应该跳转到首页，但是一直点也不跳，而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话，要按业务需求来。 前言 随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各...
阅读 3105·2021-11-18 10:02
阅读 2617·2021-10-13 09:47
阅读 3033·2021-09-22 15:07
阅读 791·2019-08-30 15:43
阅读 1809·2019-08-30 10:59
阅读 1684·2019-08-29 15:34
阅读 1702·2019-08-29 15:06
阅读 438·2019-08-29 13:28
