[微信小程序]仿真翻页，仅支持图片

介绍

在微信小程序做了一个简单的仿真全屏翻页，主要运用了css的翻转特效；
上一页翻转：点击屏幕左侧或者向右滑动；
下一页翻转：点击屏幕右侧或者向左滑动；

效果预览

主要代码

<!--page-turning.wxml-->
<block wx:for="{{imageList}}" wx:for-index="index">
  <view wx:if="{{index==currentPage}}" class="page-flip"  catchtouchstart='touchStart' catchtouchend="touchEnd">
    <view class="r1" style="transform-origin:{{(turnPage == currentPage && index== currentPage )?windowWidth*2+diff:windowWidth+diff+rotate/2}}px {{diff/2}}px;transform:translate(-{{(turnPage == currentPage && index== currentPage )?windowWidth+diff:diff+rotate/2}}px, -{{diff/2}}px) rotate(-{{(turnPage == currentPage && index== currentPage )?0:rotate}}deg);">
      <view class="p1" style="height:{{windowHeight+diff}}px;width:{{windowWidth+diff}}px">
        <view style="height:{{windowHeight}}px;width:{{windowWidth}}px;transform-origin:{{windowWidth}}px 0px;transform:translate({{(turnPage == currentPage && index== currentPage )?windowWidth+diff:diff+rotate/2}}px, {{diff/2}}px) rotate({{(turnPage == currentPage && index== currentPage )?0:rotate}}deg);background-image: url({{imageList[currentPage]}})">
        </view>
      </view>
    </view>
    <view class="p2">
      <view style="height:{{windowHeight}}px;width:{{windowWidth}}px;background-image: url({{imageList[currentPage+1]}})">
      </view>
    </view>
    <view class="r3" style="transform-origin:{{(turnPage == currentPage && index== currentPage )?windowWidth*2+diff:windowWidth+diff+rotate/2}}px {{diff/2}}px;transform:translate(-{{(turnPage == currentPage && index== currentPage )?windowWidth+diff:diff+rotate/2}}px, -{{diff/2}}px) rotate(-{{(turnPage == currentPage && index== currentPage )?0:rotate}}deg);">
      <view class="p3" style="height:{{windowHeight+diff}}px;width:{{windowWidth+diff}}px;">
        <view style="height:{{windowHeight}}px;width:{{windowWidth}}px;transform-origin:0px 0px;transform:translate({{(turnPage == currentPage && index== currentPage )?diff:windowWidth+diff-rotate/2}}px, {{diff/2}}px) rotate(-{{(turnPage == currentPage && index== currentPage )?0:rotate}}deg);">
        </view>
      </view>
    </view>
  </view>
</block>

<!--page-turning.js-->  部分主要逻辑代码！！！
data: {
    windowWidth: 0, //单位px
    windowHeight: 0, //单位px
    diff: 500, //动态相差px
    rotate: 30, //deg
    imageList: [],//图片数组
    currentPage: 1,//当前页面
    turnPage: 0,//翻转页面
  },
   methods: {
    bindTurn(touchX) {
      const that = this
      const clientX = touchX
      if (clientX > that.data.windowWidth / 2) {
        that.turnNext()
      } else {
        that.turnPre()
      }
    },
    //下一页
    turnNext() {
      const that = this
      if (that.data.currentPage == that.data.imageList.length - 1{
        wx.showToast({
          title: '当前是最后一页',
          icon: 'none'
        })
      } else {
        that.setData({
          turnPage: that.data.turnPage + 1,
        })
        setTimeout(() => {
          that.setData({
            currentPage: that.data.currentPage + 1,
          })
        }, 1000)
      }
    },
    //上一页
    turnPre() {
      const that = this
      if (that.data.currentPage == 1) {
        wx.showToast({
          title: '当前是第一页',
          icon: 'none'
        })
      } else {
        that.setData({
          currentPage: that.data.currentPage - 1,
        })
        setTimeout(() => {
          that.setData({
            turnPage: that.data.turnPage - 1,
          })
        }, 500)
      }
    },
    touchStart: function(e) {　　
      this.data.touchDot = e.touches[0].pageX; // 获取触摸时的原点
    },
    touchEnd: function(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)
      }
    }
  }

/*page-turning.wxss */
.page-flip {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.r1 {
  position: absolute;
  z-index: 2;
  transition-property: transform, transform-origin;
  transition-duration: 1s;
}

.p1 {
  overflow: hidden;
}

.p1  view {
  transition-property: transform, transform-origin;
  transition-duration: 1s;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.p2  view {
  box-shadow: 0 0 11rpx rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 1;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.r3 {
  transition-property: transform, transform-origin;
  transition-duration: 1s;
  position: absolute;
  z-index: 2;
}

.p3 {
  overflow: hidden;
}

.p3  view {
  transition-property: transform, transform-origin;
  transition-duration: 1s;
  box-shadow: 0 0 11rpx rgba(0, 0, 0, 0.5);
  background-color: white;
  background-size: 100%;
  overflow: hidden;
}

本篇博客旨在记录了自己在小程序编程过程中碰到的一部分问题，如有错误的地方欢迎指正