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

看图

源码

view class=' container container-fill ' view class=' scroll-full page ' bind touch start=' scroll touch start ' bind touch move=' scroll touch end ' bind touch end=' scroll touch end ' style=' transform : translatey(-{ { scrollindex * 100 } } %)；margin-top : { { margin top } } px " view class=" section section 01 { { scrollindex==0？活动' : ' ' } } '样式='背景： # 3399 fftext class='section-maintitle '页面1/text text class=' section-subtitle '我的页面" 1/text/view view class=' section section 02 { { scrollindex==1 '？活动' : ' ' } } '样式='背景： # 00cc 66'text class='section-maintitle '页面2/text text class=' section-subtitle '我的页面" 2/text/view view class=' section section 03 { { scrollindex==2 '？活动' : ' ' } } '样式='背景： # 33 CCC'text class='section-maintitle '页面3/text text class=' section-subtitle '我的页面" 3/text/view view class=' section section 04 { { scrollindex==3 '？活动' : ' ' } } '样式='背景： # 6699 ff'text class='section-maintitle '页面4/text text class=' section-subtitle '我的页面" 4/text/view view class=' section section 05 { { scrollindex==4 '？活动' : ' ' } } '样式='背景： # 9966 ff'text class='section-maintitle '无缝对接双创服5/text text class=' section-subtitle '我的页面" 5/文本/视图/视图/视图射流研究…

页面({ data: { scrollindex:0，//当前页面的索引值totalnum:5，//总共页面数starty:0，//开始的位置x端：0,//结束的位置y critical: 100，//触发翻页的临界值margintop:0，//滑动下拉距离}，onLoad:函数(){ }，scrolTouchStart :函数(e){让py=e . touch[0].佩吉；这个。setdata({ start : py })}，scroltouchmove :函数(e){ let py=e . touch[0].佩吉；设d=this . data this . setdata({ end y : py，})if(py-d . start 100 py-d . starty-100){ this。setdata({ marginto p : py-d . starty })}，scroltouchend : function(e){ let d=this。数据；if(d . endy-d . starty 100d。scrollindex 0){ this。setdata({ scrollindex :d。scrollindex-1 })} else if(d . endy-d . starty-100d。滚动索引这个。数据。totalnum-1){ this。setdata({ scrollindex :d。scrollindex 1 })这个。setdata({开始：0，结束：0，边距。容器填充{身高： 100%；飞越：隐藏；}.滚动-整页{身高： 100%；过渡：全部0.3s}。截面{身高： 100%；}.部分-主标题{显示： }块；文本对齐：中心；font-size : 50 rpxcolor : # fff-weight :粗体；字母-间距：10 rpx；衬垫-顶部： 140 rpx}.部分-字幕{显示：块；文本对齐：中心；font-size : 40 rpxcolor : # fff-weight :粗体；字母-间距：10 rpx；}.活跃。部分-主标题.活跃第3条副标题{ animation: mymove 0.8s } @关键帧我的移动{来自{ transform : translateY(-400 rpx)比例(0.5)旋转(90)；}到{ transform: translateY(0)刻度(1)Rotatey(0)；}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。