微信小程序如何编写示例代码实现卡片左右滑动效果？

本文共计938个文字，预计阅读时间需要4分钟。

快放假了，人话不多，啥也不说了。先看效果图。思路+从上面的效果图来看，基本需求包括：+ 左右滑动到一定距离，就向相应方向移动一个卡片的位置。+ 卡片滑动的过程中，有一个动的效果。

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

思路

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

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

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

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

实现

滚动视图

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

关键属性

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

属性 类型 说明 scroll-into-view string 值应为某子元素id（id不能以数字开头）。