網站首頁 編程語言 正文
1.單獨寫
page({
data:{
scrollTop:0
},
//監聽屏幕滾動 判斷上下滾動
onPageScroll: function (ev) {
var _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.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
this.setData({
istrue_scroll:true //控制頁面顯示
})
} else {
this.setData({
istrue_scroll:false //控制頁面隱藏
})
console.log('向上滾動');
}
//給scrollTop重新賦值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
},
})
2.寫在util里成公共的類
var util = require('../../../utils/util.js');
page({
data:{
scrollTop:0
},
//監聽屏幕滾動 判斷上下滾動
onPageScroll: function (ev) {
var that=this;
var data_scrollTop=this.data.scrollTop;
util.scrollFloatwindow(ev,data_scrollTop,that);
},
))
util里
module.exports = {
scrollFloatwindow:scrollFloatwindow
}
//滾動方向判斷方法
function scrollFloatwindow(ev,data_scrollTop,that){
if (ev.scrollTop <= 0) {
ev.scrollTop = 0;
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
if (ev.scrollTop > data_scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
that.setData({
istrue_scroll:true
})
} else {
that.setData({
istrue_scroll:false
})
console.log('向上滾動');
}
setTimeout(function () {
that.setData({
scrollTop: ev.scrollTop
})
}, 0)
}
原文鏈接:https://blog.csdn.net/Zan_Z/article/details/106814495
相關推薦
- 2022-10-03 pytest文檔內置fixture的request詳情_python
- 2022-06-09 Nginx隱藏式跳轉(瀏覽器URL跳轉后保持不變)_nginx
- 2022-05-01 C#使用log4net打日志_C#教程
- 2022-10-31 Golang?template?包基本原理分析_Golang
- 2022-02-02 怎么樣判斷頁面是否在iframe框架里
- 2023-09-12 SpringBoot整合MQTT(MqttClient)
- 2022-01-18 uniapp實現動態標記效果詳細步驟【前端開發】
- 2023-02-10 docker-compose實現容器任務編排的方法步驟_docker
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支