编程语言
首页 > 编程语言> > 微信小程序 上下整版滑动切换效果

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

作者:互联网

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

 

标签:starty,scrollindex,微信,section,py,整版,滑动,setData,页面
来源: https://www.cnblogs.com/magicg/p/15941876.html