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

2022-02-27 12:02:06 阅读：221 来源： 互联网

标签：starty scrollindex 微信 section py 整版滑动 setData 页面

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

  /**
   * 页面的初始数据
   */
  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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