微信小程序 上下整版滑动切换效果

本文主要是介绍微信小程序 上下整版滑动切换效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原地址： 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);
  }
}

这篇关于微信小程序 上下整版滑动切换效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！