“我报名参加1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

大家好，我是疯狂的小波。最近在小程序中要实现一个图片切换 滑动查看详情的效果，如上图：切换到最后一张图片时，继续左滑，显示滑动查看详情模块，并且左滑指定距离后，文案变成释放查看详情，此时手势释放就会跳转到详情页；如果没有到指定距离释放则图片回到原位，什么都不做。

其实这样的效果在各大平台现在都用的非常多了。基本都是用于商品的头图。

看了下原生的 swiper 组件，并没有提供相关的功能。本来想自己实现一个类似 swiper 组件的效果，再加上滑动查看详情功能；但是由于开发周期较短，短时间内基本很难实现和 swiper 完全一样的功能和效果，所以就想能不能基于 swiper 组件进行扩展，来达到这个目标。这样也能够避免重复造轮子，并且自己实现的不一定有原生的好用。

接下来我们就来看看，如何基于 swiper 组件来实现这个效果。

方案尝试

最开始想的是，在最后一张图片上面增加一个遮罩层，在遮罩层上面绑定一个滑动事件，通过滑动事件的移动距离来控制 swiper 和 滑动查看更多模块 的位置，同时判断左滑超过指定距离时触发释放查看详情的状态。

理论来说这种方案是可行的，但是实际操作过程中发现，存在很多问题，如：swiper 滑动到最后一张图片，再左滑时是有阻尼效果的（图片滑动距离小于手势拖动距离，并且距离越大，阻尼效果越明显）；而右滑没有阻尼效果，并且达到一定距离还会切换到上一张图片，而我们自己在遮罩层实现的滑动事件默认是没有这种效果的，这样就和原生的 swiper 效果不同步了。

虽然这种也可以解决，但是成本比较高，不符合我们的预期；并且显然也不是一个好的方案，原生的 swiper 一旦有这方便的改动，我们的实现又会不一定能契合。

最终方案

查看官方文档发现，swiper 组件提供 bindtransition 事件监听，也就是左右滑动时 swiper-item 位置改变的回调，基于这个回调事件，我们就可以拿到实际左右滑动距离了，而不用考虑阻尼效果的影响。（所以还是得多看文档啊）

那查看详情模块的显示位置处理呢？如果根据 transition 的回调移动距离来设置位置，会发现移动时存在抖动的情况，效果并不流畅，这是因为 transition 回调有一个类似节流的处理，并不是每移动1个像素都会触发回调，而是在一定距离或时间后才触发，所以无法保证效果的流畅性。

思考后发现，我们可以直接将这个模块放在最后一个图片的模块内，通过定位展示在图片右侧，这样左滑拖动时，模块就会自动显示了。并且滑动距离也能够保持与图片完全一致。

接下来只要实现：在最后一张图片左滑时，如果达到指定距离，变更查看文案，释放时触发查看详情事件，如果没有达到指定距离，什么都不做。

这个可以结合 touchstart、touchend 事件来处理。

大概流程如下：