翻页效果实现,小程序,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; */
}

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值