微信小程序 屏幕滚动监听
2023-09-11 14:20:19 时间
一、监听屏幕滚动 判断上下滚动
onPageScroll: function (ev) {
console.log(ev)
let _this = this
//当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值
if (ev.scrollTop <= 0) {
ev.scrollTop = 0
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判断浏览器滚动条上下滚动
if (ev.scrollTop > _this.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
console.log('向下滚动'+ev.scrollTop);
} else {
console.log('向上滚动'+ev.scrollTop);
}
//给scrollTop重新赋值
setTimeout(function () {
_this.scrollTop = ev.scrollTop
}, 0)
},
二、设置屏幕返回顶部
//设置屏幕滚动到顶部
wx.pageScrollTo({
scrollTop: 0
})
相关文章
- 微信公众号开发
- 微信小程序 - 深度定义骨架屏(提示)
- 微信小程序 - cb回调(typeof cb == "function" && cb(obj);)
- 【微信小程序】-- 模板语法与配置的总结(二十一)
- 【微信小程序】-- 全局配置 -- tabBar(十七)
- 微信小程序 - 点击导航栏标签切换变色(导航栏当前hover样式)
- java微信开发(wechat4j)——access_token中控服务器实现
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab
- 微信小程序之趣闻
- 微信将与外交部推“12308微信版” 或以小程序形式出现
- 微信H5支付申请相关问题
- 微信wap开发,页面显示元素不全-微信开发(asp.net)
- 微信小程序云开发项目实战之商城开发日记 01
- 微信小程序 使用async await
- 微信小程序---代码构成
- 微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
- 微信小程序自定义函数返回值
- java 实现微信小程序订阅消息
- 谷粒学院——Day13【微信扫描登录】
- 微信base64图片显示问题