翻页效果实现，小程序，H5，翻书效果

本代码是实现小程序的左右滑动，点击翻书的效果，改改在H5也可以用。

效果图：

实现代码：

  <image class="item_0" src="{{imageList[turnPage]}}" catchtouchstart='touchStart' catchtouchend="touchEnd"></image>
  <image class="item_1" src="{{imageList[turnPage+1]}}" catchtap="ccccc"></image>
  <image class="item_2" wx:if="{{ccccc}}" src="/images/fanye3.gif"></image>

js

Page({
  data: {
    windowWidth: wx.getSystemInfoSync().windowWidth, //单位px
    windowHeight: wx.getSystemInfoSync().windowHeight, //单位px
    imageList: ['https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3121243347,1466517104&fm=26&gp=0.jpg','https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3128924642,1107205623&fm=15&gp=0.jpg','https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381219144,3184889911&fm=26&gp=0.jpg'], //图片数组
    turnPage: 0,//翻转页面
  },
  turnNext(){
    var turnPage =this.data.turnPage;
    if(turnPage>=this.data.imageList.length)return
    turnPage= turnPage+1
    this.setData({
      ccccc:true
    })
    setTimeout(() => {
      
    this.setData({
      ccccc:false,
      turnPage
    })
    },700);
  },
  turnPre(){
    var turnPage =this.data.turnPage;
    if(turnPage==0)return
    turnPage= turnPage-1
    this.setData({
      ccccc:true
    })
    setTimeout(() => {
      
    this.setData({
      ccccc:false,
      turnPage
    })
    },700);
  },
  bindTurn(touchX) {
    const that = this
    const clientX = touchX
    if (clientX > that.data.windowWidth / 2) {
      that.turnNext()
    } else {
      that.turnPre()
    }
  },
  touchStart(e) {　　
    this.data.touchDot = e.touches[0].pageX; // 获取触摸时的原点
  },
  touchEnd(e) {　　　　 
    var that = this;　　
    var touchMove = e.changedTouches[0].pageX;　　 
    // 向左滑动 
    if (touchMove - this.data.touchDot <= -40) {　　　　 //执行切换页面的方法
      that.turnNext() 　　　　　　
    }　　 
    // 向右滑动 
    else if (touchMove - this.data.touchDot >= 40){　　　　　　　　
      that.turnPre()　　　　
    }else{
      that.bindTurn(touchMove)
    }
  }
})

css

/*page-turning.wxss */
.item_0 {
  position: absolute;
  width: 95%;
  height: 95%;
  z-index: 1;
  left: 0%;
  bottom: 0%;
}
.item_2{
  position: absolute;
  width: 95%;
  height: 100%;
  z-index: 1;
  left: 0%;
  top: 0%;
}
.item_1 {
  position: absolute;
  width: 95%;
  height: 95%;
  z-index: 0;
  bottom: 0%;
  /* overflow: hidden; */
}