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

布满荆棘的人生 2022-12-20 03:19 345阅读 0赞

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

效果图：

![20201110143733943.gif][]

实现代码：

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

[20201110143733943.gif]: /images/20221120/da726b4f58314c66a8f60e5db45d0f5c.png