網(wǎng)站首頁(yè) 編程語(yǔ)言 正文
小程序監(jiān)聽(tīng)屏幕滾動(dòng) 判斷滾動(dòng)方向上下滾動(dòng)且滾動(dòng)到一定位置
作者:Zan^Z 更新時(shí)間: 2022-02-19 編程語(yǔ)言1.單獨(dú)寫(xiě)
page({
data:{
scrollTop:0
},
//監(jiān)聽(tīng)屏幕滾動(dòng) 判斷上下滾動(dòng)
onPageScroll: function (ev) {
var _this = this;
//當(dāng)滾動(dòng)的top值最大或者最小時(shí),為什么要做這一步是由于在手機(jī)實(shí)測(cè)小程序的時(shí)候會(huì)發(fā)生滾動(dòng)條回彈。防止發(fā)生回彈,設(shè)置默認(rèn)最大最小值
if (ev.scrollTop <= 0) {
ev.scrollTop = 0;
} else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判斷瀏覽器滾動(dòng)條上下滾動(dòng)
if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
this.setData({
istrue_scroll:true //控制頁(yè)面顯示
})
} else {
this.setData({
istrue_scroll:false //控制頁(yè)面隱藏
})
console.log('向上滾動(dòng)');
}
//給scrollTop重新賦值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
},
})
2.寫(xiě)在util里成公共的類(lèi)
var util = require('../../../utils/util.js');
page({
data:{
scrollTop:0
},
//監(jiān)聽(tīng)屏幕滾動(dòng) 判斷上下滾動(dòng)
onPageScroll: function (ev) {
var that=this;
var data_scrollTop=this.data.scrollTop;
util.scrollFloatwindow(ev,data_scrollTop,that);
},
))
util里
module.exports = {
scrollFloatwindow:scrollFloatwindow
}
//滾動(dòng)方向判斷方法
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('向上滾動(dòng)');
}
setTimeout(function () {
that.setData({
scrollTop: ev.scrollTop
})
}, 0)
}
原文鏈接:https://blog.csdn.net/Zan_Z/article/details/106814495
相關(guān)推薦
- 2022-06-26 深入解析python返回函數(shù)和匿名函數(shù)_python
- 2022-04-09 python的函數(shù)參數(shù)你了解嗎_python
- 2022-07-27 Python?迭代器Iterator詳情_(kāi)python
- 2023-01-03 利用Rust實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Ping應(yīng)用_Rust語(yǔ)言
- 2023-01-02 最新C語(yǔ)言中g(shù)etchar的使用_C 語(yǔ)言
- 2023-08-01 webpack 的熱更新及其原理
- 2022-12-19 python的sorted函數(shù)及使用解析_python
- 2023-02-28 ts之 命名空間 namespace、三斜線(xiàn)指令、聲明文件(declare 聲明ts的變量函數(shù)第三方
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過(guò)濾器
- Spring Security概述快速入門(mén)
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支