微信小程序书籍翻页效果

微信小程序实现书籍翻页功能

实现原理

通过覆盖页面来实现翻页效果可以将覆盖的页面分成3个过程第一层是上一页，第二层是当前页面，第三层是下一页，其他页面全部隐藏，一般向上翻页用到的是第一层和第二层，向下翻页用到的是第二层和第三层。

效果展示（不会做动图凑合看吧）

大致就是这样的一个效果（做的是手指滑动的）

  <view wx:if="{{cl1==0||cl1==1}}" class="wenke_list {{cl1==0&&cl2==1?'list_right':cl1==1&&cl2==0?'listleft':''}} {{cl1==0?'list_true':''}}" style="" bindtouchstart='touchStart' bindtouchmove='touchMove'>
    // 首页（我这里是做了一个目录）
    // 如果不想要删了然后改一下下面的条件👇（统一减一）
  </view>
  <view wx:if="{{cl1==(i+1)||cl1==(i+2)||cl1==(i)}}" wx:for='{{list.data}}' wx:for-index="i" wx:key="*this" class="wenke_list {{cl1==(i+1)&&cl2==(i+2)?'list_right':cl1==(i+2)&&cl2==(i+1)?'listleft':cl1==(i+2)&&cl2==(i+3)?'list_false':cl1==i&&fan!=1?'list_false':''}} {{cl1==i+1?'list_true':''}} "bindtouchstart='touchStart' bindtouchmove='touchMove'>
  //主要内容
  </view>
  <view wx:if="{{cl1==list.data.length||cl1==list.data.length+1}}" class="wenke_list {{cl1==0&&cl2==1?'list_right':cl1==1&&cl2==0?'listleft':''}} {{cl1==0?'list_true':''}}" bindtouchstart='touchStart' bindtouchmove='touchMove'>
  // 最后一页（我这里做了一个返回书架的选择）
  // 如果不想要删了就可以
  </view>

页面这里通过的是逻辑层用cl1来判断当前是多少页，页数对应的是下标，但但是我加了一个首页的目录所以页数就变成了下标+1。

const app = getApp();
Page({
  data: {
    cl1: 0,
    cl2:0,
    mo:0,
    fan:0
  },
  //这是目录点击跳转到对应页面的方法（不要的可以去掉）
  xia(event){
    console.log(event.currentTarget.dataset.id)
    var id = event.currentTarget.dataset.id
    this.setData({
      cl2: id,
      cl1: id + 1
    })
  },
  // 这是获取手指首次触碰屏幕位置方便下面做翻页的判断
  touchStart(e) {
    this.setData({
      mo: e.touches[0].pageX
    })
  },
  // 这是判断手指滑动的幅度有多大向哪边滑动
  touchMove(e) {
    const that = this
    const data = this.data.list
    if (this.data.mo - e.touches[0].pageX >= 50 && this.data.fan == 0) {
      if(that.data.cl1<that.data.list.data.length+1){
      // cl2是上一页是第几页
      // cl1是当前页
      // 对比cl1和cl2来获取是向上翻页还是向下翻页
        this.setData({
          fan: 1,
          cl2: that.data.cl1,
          cl1: that.data.cl1 + 1
        })
        // 延时器是害怕一次性翻过多页
        setTimeout(function () {
          that.setData({
            fan: 0,
          })
        }, 2000)
      }else{
        wx.navigateBack({
          delta: 2
        })
      }
    } else if (this.data.mo - e.touches[0].pageX <= -50 && this.data.fan == 0) {
      if (that.data.cl1 > 0){
        this.setData({
          fan: 1,
          cl2: that.data.cl1,
          cl1: that.data.cl1 - 1
        })
        setTimeout(function () {
          that.setData({
            fan: 0
          })
        }, 2000)
      }else{
        wx.navigateBack({
          delta: 2
        })
      }
    }
  },
})

只要注意cl1和cl2不要出错其他的也没什么好注意的，要是有其他的翻页方式直接改就行但是要注意cl1和cl2不要出错还有就是延时器要保留下来fan是当前的是否在翻页状态中这样可以防止一次翻动多页

.wenke_list{
  width: 100%;
  min-height: 100vh;
  position: absolute;
  background: #fff;
  transform-origin: 0px 0px;
  box-sizing: border-box;
}
/*这个是其他页面隐藏*/
.list_false{
  visibility:hidden;
  height: 100vh;
  overflow: hidden;
}
/*下一页*/
.listleft{
  z-index: 200;
  animation: flipBook2 2s forwards;
}
@keyframes flipBook2 {
  0% {
    transform: rotateY(0deg);
    transform: rotateY(0deg)skewY(0deg);
  }
  100% {
    transform: rotateY(160deg);
    transform: rotateY(-160deg)skewY(-20deg);
  }
}
/*上一页*/
.list_right {
  z-index: 100;
  animation: flipBook1 2s forwards;
}
@keyframes flipBook1 {
  0% {
    /* transform: rotateY(160deg); */
    transform: rotateY(-160deg)skewY(-20deg);
  }
  100% {
    /* transform: rotateY(0deg); */
    transform: rotateY(0deg)skewY(0deg);
  }
}

样式没有什么要求自己感觉怎么好看怎么来但是注意一下就是除了3层其他的都要隐藏所有的盒子都要用定位让他们重叠在一起还有就是注意一下z轴的关系
博客小黄人12138