摘要：
今天来说商城项目中购物车页面的左滑显示删除按钮特效，此次我们用的是微信小程序中自带的movable-view组件，虽然特效不错，不用我们手写js来判断了，但是，一不小心就掉坑中......

接着上一篇的讲，这一节我们来讲购物车页面中的坑。如图：微信小程序实战商城项目购物车左滑删除订单页面这个页面本身没有什么，值得一提的就是里面的特效功能。例如：左滑显示删除按钮的特效、单选全选、购物车加减按钮的功能

一、左滑删除功能的选择

其实最开始艺灵我并没有使用官方的这个 movable-view 来做左滑删除的功能，而是用普通的view做的。后来在网上看有一些文章里面使用的是这个 movable-view 。于是，也玩了一把，没想到真是一坑接一坑，坑到最后我直接放弃官方的 movable-view 组件了！果断捡起原先的代码继续使用，嗯，还是原来的好用！

二、用官方的movable-view做一个左滑删除的例子

这个 movable-view 是什么东西呢？官方文档是这样说的：“可移动的视图容器，在页面中可以拖拽滑动”。怎么样，听这简介，是不是跟我们想要的左滑删除功能很接近了啊？！再来看看属性，哟，还不少。再看属性的介绍，就让很多看官更想使用这个 movable-view 组件了。不信？去看看官方权威文档吧！文档地址： developers.weixin.qq.com/miniprogram/dev/component/movable-view.html 。

不得不说，在这个组件上面，官方还是很贴心的。竟然还提供了一个小demo！如图：在官方文档中点击案例即可看到有关movable-view的效果此时我们只需要点击文档中的：“在开发者工具中预览效果”这个超链接，然后就会激活微信开发者工具，然后就可以直接在本地跑效果了。

官方的案例终归是官方的，跟我们项目的还是有点区别的。所以，我们还要是在基础上来写代码。我们先来实现一个简单的购物车列表页面。

2.1、wxml代码

<movable-area class="item-touch" wx:for="{{cartdata}}" wx:key="{{index}}">
　<movable-view x="{{item.x}}" direction="horizontal" inertia="true" out-of-bounds="true" data-i="{{index}}" class="item-touch-list flex" data-id="touch" >
　　{{index}}
　</movable-view>
　<view class="item-touch-tool">删除</view>
</movable-area>

上面的代码可以抽成一个组件方便重复使用，(不过此处没有这样做)。数据嘛，就用js来渲染好了。跟Vue.js的方法一样，只需要在对应的js文件中添加一个名叫cartdata的数组就行了。

2.2、js代码

cartdata:[{id:1,x:0},{id:2,x:0},{id:3,x:0}]

为了便于看官理解，来一张此时项目的文件配图：此时我们只用了3个文件来展示本节提到的效果没错，我们现在只用到了三个文件，分别是： /pages/index.js 、 /pages/index.wxml 以及接下来要写的 /pages/index.wxss

正如图中所说，页面布局比较挫是因为我们还没有写 wxss 呢！下面就写 wxss 吧！

至于wxss的话，就有一个坑了。

什么坑呢？最开始我把父级的宽度设置的是100%，结果在拖拽松开后，那个“删除”按钮始终无法漏出来！就在我很懵逼的时候，在网上搜索到了答案： segmentfault.com/a/1190000014831500 ，原来父级的宽度要减去删除按钮的宽度。一修改后，果然，删除按钮可以显示了！(提前剧透：艺灵刚提供链接的这个作者早已放弃了官方的movable-view组件！至于为什么，肯定是在实战中发现坑了呗！！！(:偷笑))

2.3、wxss代码

.item-touch{display:flex;position:relative;margin-bottom:20rpx;width:calc(750rpx - 148rpx);height:100rpx;line-height:100rpx}
.item-touch-list{z-index:10;width:750rpx;height:100%;padding-left:30rpx;box-sizing:border-box;background-color:#fff}
.item-touch-tool{width:148rpx;position:absolute;top:0;bottom:0;left:100%;background-color:#f43838;font-size:28rpx;line-height:100rpx;text-align:center;color:#fff}

此时我们只写这三行wxss代码，页面中的布局就出来了。如图：3行代码完成一个简单的左滑删除布局有兴趣的看官可以复制本节的代码亲自跑一跑。而且重要的是：我们现在不需要写任何js代码，这个按住后左滑显示删除的特效就已经有了！是不是感觉很厉害？！这效果也太简单了吧！为了照顾没有安装工具的看官，艺灵用二手的苹果6s录了一个小视频，来一起看看吧！视频如下：用微信小程序官方的movable-area组件快速滑动后的效果

三、大功告成？

如果看官复制了本节的代码并在本地跑过后，肯定会体验到跟预期中一样的效果。那么，事情就完了吗？我们暂且不考虑点击“删除”按钮时删除数据的操作。事情当然就没有因此而结束啦！而且，一个潜在的坑早已经挖好了，而且看官已经成功的掉进了坑中！

不会吧，我感觉滑的还挺顺畅的啊。这效果，松开后还有回弹效果，666啊！

四、bug重现

行了行了，安静会儿吧！艺灵我要放大招了，是时候剧透真正的bug了！看官，能温柔点不？轻点、慢点滑试下呗。于是，此时的效果还是来看小视频吧！视频如下：用微信小程序官方的movable-area组件缓慢滑动后的效果

看到没有！竟然卡在某个位置了！

而刚刚艺灵提到的那个作者，虽然文章中是有判断，但这种e.detail.source == "touch" 就不在范围内了。

肯定有看官说，那就把判断条件加上不就完了呗，多大点事啊。行吧，看官有本事就自己加去吧！

五、touchstart、touchmove、touchend和change的执行顺序

为了解决这个慢慢滑动后停止在中间某个位置的坑，我把几个触摸事件touchstart、touchmove、touchend以及官方说的change全加上去了，最后是这样：bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" bindchange="onChange" ，然后我们再添加一段js在控制台打印信息。

5.1、测各事件执行时间顺序的代码

touchS: function (e) { console.log('touchS:'+Date.now()) },
touchM: function (e) { console.log('touchM:' + Date.now()) },
touchE: function (e) { console.log('touchE:' + Date.now()) },
onChange: function (e) { console.log('onChange:' + Date.now()) },

代码直接写到本案例的 /pages/index.js 中的data后面即可。然后我们就慢慢滑动下，看各事件打印的结果吧。如图：当e.detail.source==friction时change事件晚于touchend事件还有另外一种情况，如图：当e.detail.source等于touch时touchend最后执行至于为什么会有两种情况，还是跟产生移动的原因有关，毕竟官方文档中还是有说明的：“bindchange，拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）”

六、解决方案

既然找到了原因，那我们就可以通过分情况来写代码了。大致就是：当有惯性 e.detail.source == "friction" 时，我们通过判断拖拽的位移来决定是否要完全显示按钮；当 e.detail.source != "friction" 时，此时由于 touchend 最后结束，所以我们在 touchE 中处理逻辑就可以了。核心js代码片段如图：用微信小程序官方的movable-area组件并优化js后的代码片段

最后，我们来看下最终的小视频演示吧！怎么样，如丝般顺滑，哈哈哈！成品视频如下：用微信小程序官方的movable-area组件优化后的成品效果演示

哦，差点忘记了，那个 e.detail.source == "friction" 判断条件必须要写，否则，有坑！！！还是来看视频吧！视频如下：用微信小程序官方的movable-area组件时如果不加e.detail.source判断会再次掉坑中

七、最后

好了，到这里时一个如丝般顺滑的左滑显示删除按钮的特效就已经做完了。至于删除功能和点击加减时改变数量的事情，我们在后面的一一讲到。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2018-11-19/weixin-movable-view.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。