写一个微信小程序侧滑删除组件

2018-06-13 admin

背景

最近一直在断断续续做一个小程序的项目,看起来很小,但一直没正经做过小程序,所有没啥积累,什么东西都要自己写一遍。

今天就遇到一个需要,删除操作,按照微信的交互做一个。

向左滑动,显示删除按钮,并且,是动画、过渡的打开,左滑一丢丢并不会打开,大概 10 像素的时候才出发打开。左右滑动的时候,展开的程度和手指滑动贴合。最后手指滑动的方向决定打开还是关闭,并非起点与终点的方向。

思路

既然要贴合手指的滑动,必然与 touchstarttouchmovetouchend 有关系。

移动的效果,CSS 3 中的 2D 转换 transform: translateX(0px) 蛮合适的,只需要一个值就可以了。

首先,在 touchstart 标记起点,在 touchmove 的时候不断计算当前元素应该在哪个位置,touchend 时把状态归位、判定结果。

touchmove 中不断元素计算当前位置,手指起点、手指当前点可以计算出当前移动的距离,再与元素的起点结合,可以得到当前元素的位置。但元素的位置时刻都是变化的,需要一个当前元素点的副本。元素的位置也会在一个范围内移动,不能超过了范围。

touchend 中更新元素副本的数据,为下次滑动做准备。

最后手指滑动的方向是比较细腻的判定,需要结束滑动那一刻的状态,于是,每次滑动的时候,记录一组滑动的数组,取最后两位的值做判定。

<view class="sideslip-box" >
    <view class="sideslip-content" style="transform: translateX(-{{translateX}}px); transition: transform {{transitionTime / 1000}}s">
        <slot></slot>
    </view>
    <view class="sideslip-tool">
        <view class="btn danger" style="transform: translateX({{item.type === 'del' ? translateXDel : translateXEdit}}px); transition: transform {{transitionTime / 1000}}s">删除</view>
    </view>
</view>
{
    data: {
        transitionTime: 0, // 过渡时间
        translateX: 0, // 当前元素位置
        __currentX:0, // 内部使用,当前元素位置的副本
        __lastXs: [], // 内部使用,记录上一个x
        __startX: 0, // 内部使用,开始的X
    }
}

基本的雏形已经有了。

touchstart 中,标记起点 X,并且初始化 __lastXs,并添加第一个移动坐标。

touchmove 里面不断向 __lastXs 添加值,通过起点的 X 和当前的 X 更新元素的位置,并且做临界值的判断。手指滑动的时候,跟随状态,所以并不需要过渡。

touchend 里面做最有的判定,例如方向、最后的元素位置、过渡时间等。

按照以上方式做,sideslip-content 这边的交互已经完成了,接下来结合一些计算方式,把按钮昨晚就好了。

剩下的可以看看这个代码,微信小程序 侧滑删除、编辑

一些小问题

在滑动的时候,貌似最小需要 16 像素才会响应,是不是我的姿势有点问题。

原文阅读:写一个微信小程序侧滑删除组件

原文链接:https://segmentfault.com/a/1190000015280637

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33989.html

文章标题:写一个微信小程序侧滑删除组件

相关文章
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
回到顶部