html5微信滑动翻页效果,微信小程序翻页效果

简介

1.利用touch事件判断左滑右滑

2.左滑(下一张)时,删除卡片集合第一项(当前页),并将删除的内容放到卡片集合末尾,添加相应动画过度

3.右滑(上一张)时,删除卡片集合末尾项(最后一页),并将删除的内容放到卡片集合第一项,添加相应动画过度

4.判断是否滑到最后一张(第一张),给出提示

效果图

1.gif

wxml

{ {item.name}}

js

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

nowPgae:1,

startX:0,

slider:false,

animationData:{},

cardInfoList: [{ name: 1}, { name: 2}, { name: 3}, { name: 4}]

},

touchstart(e){

this.setData({

startX: e.changedTouches[0].clientX,

})

},

touchend(e) {

let that=this;

let startX = this.data.startX;

let endX = e.changedTouches[0].clientX;

if (thi