微信小程序页面上下滚动效果

微信(小程序)  /  管理员 发布于 3年前   377

本文实例为大家分享了微信小程序页面上下滚动的具体代码，供大家参考，具体内容如下

看图

源码

    页面1  我的页面”1    页面2  我的页面”2    页面3  我的页面”3    页面4  我的页面”4    无缝对接双创服5  我的页面”5  

js

Page({ data: {  scrollindex:0, //当前页面的索引值  totalnum:5, //总共页面数  starty:0, //开始的位置x  endy:0, //结束的位置y  critical: 100, //触发翻页的临界值  margintop:0, //滑动下拉距离 }, onLoad: function () { }, scrollTouchstart:function(e){  let py = e.touches[0].pageY;  this.setData({   starty: py  }) }, scrollTouchmove:function(e){  let py = e.touches[0].pageY;  let d = this.data;  this.setData({   endy: py,  })  if(py-d.starty<100 && py-d.starty>-100){     this.setData({    margintop: py - d.starty   })  } }, scrollTouchend:function(e){  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
css
.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); }}
 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
                                                                        
您可能感兴趣的文章:
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
微信小程序之判断页面滚动方向的示例代码
微信小程序仿今日头条导航栏滚动解析
微信小程序--特定区域滚动到顶部时固定的方法
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
微信小程序页面滚动到指定位置代码实例