本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下
看图
源码
& lt;视图类=叭萜鱟ontainer-fill”比;
& lt;视图类=" scroll-fullpage " bindtouchstart=皊crollTouchstart bindtouchmove”=皊crollTouchmove”bindtouchend=皊crollTouchend”比;
& lt;视图类=辈糠謘ection01 {{scrollindex==0 & # 63;“活跃”:“}}”比;
& lt;文本类=" section-maintitle "祝辞页面1 & lt;/text>
& lt;文本类=" section-subtitle "在我的页面”1 & lt;/text>
& lt;/view>
& lt;视图类=辈糠謘ection02 {{scrollindex==1 & # 63;“活跃”:“}}”比;
& lt;文本类=" section-maintitle "祝辞页面2 & lt;/text>
& lt;文本类=" section-subtitle "在我的页面”2 & lt;/text>
& lt;/view>
& lt;视图类=辈糠謘ection03 {{scrollindex==2 & # 63;“活跃”:“}}”比;
& lt;文本类=" section-maintitle "祝辞页面3 & lt;/text>
& lt;文本类=" section-subtitle "在我的页面”3 & lt;/text>
& lt;/view>
& lt;视图类=辈糠謘ection04 {{scrollindex==3 & # 63;“活跃”:“}}”比;
& lt;文本类=" section-maintitle "祝辞页面4 & lt;/text>
& lt;文本类=" section-subtitle "在我的页面”4 & lt;/text>
& lt;/view>
& lt;视图类=辈糠謘ection05 {{scrollindex==4 & # 63;“活跃”:“}}”比;
& lt;文本类=" section-maintitle "祝辞无缝对接双创服5 & lt;/text>
& lt;文本类=" section-subtitle "在我的页面”5 & lt;/text>
& lt;/view>
& lt;/view>
& lt;/view>
js
页面({
数据:{
scrollindex: 0,//当前页面的索引值//总totalnum: 5日共页面数
starty: 0,//开始的位置x
恩迪:0,//结束的位置y
关键:100//触发翻页的临界值
margintop: 0,//滑动下拉距离
}，>
.container-fill {
高度:100%;
溢出:隐藏;
}
.scroll-fullpage {
高度:100%;
过渡:所有0.3年代;
}
.section {
高度:100%;
}
.section-maintitle {
显示:块;
text-align:中心;
字体大小:50 rpx;
颜色:# fff;
粗细:大胆的;
字母间距:10 rpx;
padding-top: 140 rpx;
}
.section-subtitle {
显示:块;
text-align:中心;
字体大小:40 rpx;
颜色:# fff;
粗细:大胆的;
字母间距:10 rpx;
}
.active .section-maintitle,
.active .section-subtitle {
动画:mymove 0.8秒;
}
@keyframes mymove {
从{
变换:translateY (-400 rpx)规模(0.5)rotateY(90度);
}
,{
变换:translateY(0)规模(1)rotateY (0);
}
}
,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
