[微信小プログラム]シミュレーションページをめくり、画像のみをサポート

紹介する

効果のプレビュー

プライマリコード

<!--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;
}