知識(shí)回調(diào)（不懂就看這兒?。?/h2>
| 知識(shí)專欄 | 專欄鏈接 |
|---|---|
| 微信小程序?qū)?/mark> | https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 |
| 微信小程序——Git版本管理 | https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 |
有關(guān)微信小程序的相關(guān)知識(shí)可以前往微信小程序官方文檔查看了解??！
微信小程序官方文檔傳送門
場(chǎng)景復(fù)現(xiàn)
最近在前端深入學(xué)習(xí)過程中，接觸了微信小程序的相關(guān)內(nèi)容，涉及到頁(yè)面滑動(dòng)的監(jiān)聽，因此計(jì)劃分別用幾篇文章總結(jié)一下最近的學(xué)習(xí)筆記，從了解到實(shí)際運(yùn)用微信小程序中的頁(yè)面滑動(dòng)監(jiān)聽。
監(jiān)聽效果：
核心干貨
如何進(jìn)行頁(yè)面監(jiān)聽
官方給出的方法是使用onPageScroll函數(shù)。這個(gè)函數(shù)與onLoad、onShow類似，屬于Page的專屬函數(shù)。
使用方法也非常簡(jiǎn)單，直接在Page中調(diào)用該方法就行。
//index.js
Page({
data: {
text: "This is page data."
},
onPageScroll: function() {
// 具體邏輯
},
})
了解onPageScroll
onPageScroll有一個(gè)非常重要的屬性——scrollTop。這個(gè)屬性表示頁(yè)面在垂直方向已經(jīng)滾動(dòng)的距離。我們可以通過這個(gè)參數(shù)實(shí)現(xiàn)多種多樣的頁(yè)面交互，比如頁(yè)面組件根據(jù)滑動(dòng)高度隱藏顯示、頁(yè)面組件根據(jù)高度吸頂等等。
需要注意的是：
- 只有在需要的時(shí)候才能定義此方法，且此方法定義之后方法體不能為空??！
- onPageScroll非必要不定義調(diào)用，避免與其他的滑動(dòng)事件相沖突?。?/li>
- onPageScroll中的邏輯不要太復(fù)雜，因?yàn)榇撕瘮?shù)會(huì)隨著頁(yè)面的滑動(dòng)頻繁調(diào)用。如果你想實(shí)現(xiàn)很復(fù)雜的邏輯，這邊建議優(yōu)化代碼的算法，降低時(shí)間復(fù)雜度??！
- onPageScroll中不要過于頻繁地執(zhí)行setData等引起邏輯層—渲染層之間通信的操作，尤其是大量數(shù)據(jù)的傳輸，會(huì)影響到通信的耗時(shí)?。?！導(dǎo)致看起來(lái)滑動(dòng)監(jiān)聽里的事件失效的效果?。?！
實(shí)際使用onPageScroll
我們只需要在Page中定義此方法，在方法中編寫一些簡(jiǎn)單的方法體即可。這里我監(jiān)聽的是頁(yè)面距離頂部的垂直距離。
監(jiān)聽的具體效果：
這時(shí)我們發(fā)現(xiàn)，當(dāng)頁(yè)面上滑時(shí)，scrollTop遞增，下滑時(shí)scrollTop遞減，那么此時(shí)我們可以思考如何通過scrollTop來(lái)判斷用戶對(duì)頁(yè)面的操作是上滑還是下滑。這個(gè)問題會(huì)在下期文章中詳細(xì)講述！！
以上就是關(guān)于微信小程序監(jiān)聽頁(yè)面滑動(dòng)的基礎(chǔ)知識(shí)分享，相信看完這篇文章的小伙伴們一定能運(yùn)用這些方法在項(xiàng)目開發(fā)中。當(dāng)然，可能有不足的地方，歡迎大家在評(píng)論區(qū)留言指正！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-488773.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-488773.html
到了這里，關(guān)于微信小程序——監(jiān)聽頁(yè)面滑動(dòng)（一）onPageScroll的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
