微信小程序 上下整版滑動切換效果

原地址： https://www.freesion.com/article/834394328/

js

  /**
   * 頁面的初始數據
   */
  data: {
    scrollindex: 0, //當前頁面的索引值
    totalnum: 5, //總共頁面數
    starty: 0, //開始的位置x
    endy: 0, //結束的位置y
    critical: 100, //觸發翻頁的臨界值
    margintop: 0, //滑動下拉距離
  },


  /**
   * 方法區
   */
  scrollTouchstart: function (e) {
    let py = e.touches[0].pageY;
    this.setData({
      starty: py
    })
    console.log("開始點值：", this.data.starty);
  },

  scrollTouchmove: function (e) {
    let py = e.touches[0].pageY;
    let d = this.data;
    if (py - d.starty < 100 && py - d.starty > -100) {
      this.setData({
        margintop: (py - d.starty) * 0.7
      })
    }
  },

  scrollTouchend: function (e) {
    let py = e.changedTouches[0].pageY;
    this.setData({
      endy: py
    })
    let d = this.data;
    if (d.endy - d.starty > 100 && d.scrollindex > 0) {
      this.setData({
        scrollindex: d.scrollindex - 1
      })
    } else if (d.endy - d.starty < -100 && d.scrollindex < this.data.totalnum - 1) {
      this.setData({
        scrollindex: d.scrollindex + 1
      })
    }
    this.setData({
      starty: 0,
      endy: 0,
      margintop: 0
    })
  },

wxml

 <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100 + '%'}});margin-top: {{margintop}}px">
        <view class="section section01 {{scrollindex==0?'active':''}}">
          <moreSwiper1></moreSwiper1>
        </view>
        <view class="section section02 {{scrollindex==1?'active':''}}" style="background: #00CC66;">
          <text class="section-maintitle">頁面2</text>
          <text class="section-subtitle">我的頁面”2</text>
        </view>
        <view class="section section03 {{scrollindex==2?'active':''}}" style="background: #33CCCC;">
          <text class="section-maintitle">頁面3</text>
          <text class="section-subtitle">我的頁面”3</text>
        </view>
        <view class="section section04 {{scrollindex==3?'active':''}}" style="background: #6699FF;">
          <text class="section-maintitle">頁面4</text>
          <text class="section-subtitle">我的頁面”4</text>
        </view>
        <view class="section section05 {{scrollindex==4?'active':''}}" style="background: #9966FF;">
          <text class="section-maintitle">無縫對接雙創服5</text>
          <text class="section-subtitle">我的頁面”5</text>
        </view>
      </view>

wxss

.container-fill {
  height: 100%;
  overflow: hidden;
}

.scroll-fullpage {
  height: 100%;
  transition: all 0.3s;
}

.section {
  height: 100%;
}

.section-maintitle {
  display: block;
  text-align: center;
  font-size: 50rpx;
  color: #fff;
  font-weight: bold;
  letter-spacing: 10rpx;
  padding-top: 140rpx;
}

.section-subtitle {
  display: block;
  text-align: center;
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
  letter-spacing: 10rpx;
}

.active .section-maintitle,
.active .section-subtitle {
  animation: mymove 0.8s;
}

@keyframes mymove {
  from {
    transform: translateY(-400rpx) scale(0.5) rotateY(90deg);
  }

  to {
    transform: translateY(0) scale(1) rotateY(0);
  }
}