微信小程序实现卡片左右滑动效果的示例代码

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

 

思路

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

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

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

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

实现

滚动视图

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

关键属性

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

属性	类型	说明
scroll-into-view	string	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	在设置滚动条位置时使用动画过渡

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

左滑右滑判断

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

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

代码实现

card.wxml

<scroll-view class="scroll-box" scroll-x scroll-with-animation
 scroll-into-view="{{toview}}"
 bindtouchstart="touchstart"
 bindtouchend="touchend">
 <view wx:for="{{list}}" wx:key="{{item}}" class="card-box" id="card_{{index}}">
  <view class="card">
  <text>{{item}}</text>
  </view>
 </view>
</scroll-view>

card.wxss

page{
 overflow: hidden;
 background: #0d1740;
}
.scroll-box{
 white-space: nowrap;
 height: 105vh;
}

.card-box{
 display: inline-block;
}

.card{
 display: flex;
 justify-content: center;
 align-items: center;
 box-sizing: border-box;
 height: 80vh;
 width: 80vw;
 margin: 5vh 10vw;
 font-size: 40px;
 background: #f8f2dc;
 border-radius: 4px;
}

card.js

const default_page = 0;

page({
 startpagex: 0,
 currentview: default_page,
 data: {
 toview: `card_${default_page}`,
 list: ['javascript', 'typescript', 'java', 'php', 'go']
 },

 touchstart(e) {
 this.startpagex = e.changedtouches[0].pagex;
 },

 touchend(e) {
 const movex = e.changedtouches[0].pagex - this.startpagex;
 const maxpage = this.data.list.length - 1;
 if (math.abs(movex) >= 150){
  if (movex > 0) {
  this.currentview = this.currentview !== 0 ? this.currentview - 1 : 0;
  } else {
  this.currentview = this.currentview !== maxpage ? this.currentview + 1 : maxpage;
  }
 }
 this.setdata({
  toview: `card_${this.currentview}`
 });
 }
})

card.json

{
 "navigationbartitletext": "卡片滑动",
 "backgroundcolor": "#0d1740",
 "navigationbarbackgroundcolor": "#0d1740",
 "navigationbartextstyle": "white"
}

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。