微信小程序页面上下滚动效果
微信(小程序)  /  管理员 发布于 3年前   290
本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下
看图
源码
页面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实现滚动穿透和阻止滚动的方法
- 微信小程序页面滚动到指定位置代码实例
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号