微信小程序页面上下滚动效果
微信(小程序)  /  管理员 发布于 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.scrollindexcss
.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实现滚动穿透和阻止滚动的方法
- 微信小程序页面滚动到指定位置代码实例
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号