快放假了人狠话不多，啥也不說了先看效果图。

从上面的效果图来看基本的需求包括：

• 左右滑动到一定的距离，就向相应的方向移动一个卡片的位置
• 卡片滑动的時候有一定的加速度。
• 如果滑动距离太小则依旧停留在当前卡片，而且有一个回弹的效果

看到这样的需求，不熟悉小程序的同学可能感觉有点麻烦。首先需要计算卡片的位置然后再设置滚动条的位置，使其滚动到指定的位置而且在滚动的过程中，加上一点加速度...

嘫而当你查看了小程序的开发文档之后，就会发现小程序已经帮我们提前写好了我们只要做相关的设置就行。

左右滑动其实就是水岼方向上的滚动。小程序给我们提供了组件我们可以通过设置scroll-x属性使其横向滚动。

在scroll-view组件属性列表中我们发现了两个关键的属性：

值應为某子元素id（id不能以数字开头）。设置哪个方向可滚动则在哪个方向滚动到该元素
在设置滚动条位置时使用动画过渡

有了以上这两个屬性，我们就很好办事了只要让每个卡片独占一页，同时设置元素的ID就可以很简单的实现翻页效果了。

这里我们通过触摸的开始位置和结束位置来决定滑动方向。

微信贺卡制作小程序小程序给我们提供了touchstart以及touchend事件我们可以通过判断开始和结束的时候的横坐标来判断方向。

以上如有错漏，欢迎指正！希望能让大家有点收获

最后祝各位搬砖工程师劳动节快乐，假期愉快（如果你有的话）