This code is to achieve a small program to slide around, click the book effect, change in H5 can also be used.

Effect:

Implementation code:

  <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>
Copy the code

js

Page({data: {windowWidth: wx.getSystemInfoSync().windowWidth, // unit px windowHeight: Wx.getsysteminfosync ().windowheight, // unit px imageList: [' https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3121243347, & FM = 26 & gp = 0. 1466517104 JPG ', 'https://ss1.bdstatic. Com/cfuxsh_q1ynxgkpowk1hf6hhy/it/u = 3128924642110205 623 & 70 FM = 15 & gp = 0. JPG ', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoW K1HF6hhy/it/u= 13812191443184889911&fm =26&gp=0.jpg'], 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.c. with our fabrication: hangedTouches [0]. PageX; // Swipe left if (touchMove -this.data.touchdot <= -40) {// Execute the page-switching method that.turnNext()} // Swipe right else if (touchMove - this.data.touchdot >= 40){that.turnpre ()}else{that.bindTurn(touchMove)}})Copy the code

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; */
}
Copy the code