微信小程序
觸底
/** * 上拉觸底事件 */ onReachBottom() { console.log('上拉觸底事件觸發(fā)'); }
onReachBottom
監(jiān)聽(tīng)用戶上拉觸底事件。
可以在app.json的window選項(xiàng)中或頁(yè)面配置中設(shè)置觸發(fā)距離onReachBottomDistance。
在觸發(fā)距離內(nèi)滑動(dòng)期間，本事件只會(huì)被觸發(fā)一次。
觸頂事件
onPageScroll({ scrollTop }) { console.log('頁(yè)面滑動(dòng)觸發(fā)'); if(scrollTop === 0) conosle.log('觸頂'); }
onPageScroll(Object object)
監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件。
參數(shù)Object object的屬性為scrollTop；類型為Number，表示頁(yè)面在垂直方向已滾動(dòng)的距離，單位是px。
請(qǐng)只在需要的時(shí)候才在page中定義此方法，不要定義空方法。以減少不必要的事件派發(fā)對(duì)渲染層邏輯層通信的影響。
請(qǐng)避免在onPageScroll中過(guò)于頻繁的執(zhí)行setData等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數(shù)據(jù)，會(huì)影響通信耗時(shí)。
uniApp
觸底
onReachBottom() { console.log('觸底'); }頁(yè)面滾動(dòng)到底部的事件(不是
scroll-view滾到底)，常用于下拉下一頁(yè)數(shù)據(jù)。onReachBottom可在pages.json里定義具體頁(yè)面底部的觸發(fā)距離onReachBottomDistance，比如設(shè)為50，那么滾動(dòng)頁(yè)面到距離底部50px時(shí)，就會(huì)觸發(fā)onReachBottom事件。
觸頂
onPageScroll({ scrollTop }) { console.log('監(jiān)聽(tīng)頁(yè)面滾動(dòng)'); if (scrollTop === 0) console.log('頁(yè)面觸頂'); }
scrollTop返回的是Number類型，頁(yè)面在垂直方向已滾動(dòng)的距離，單位為px。onPageScroll里不要寫交互復(fù)雜的js，比如頻繁修改頁(yè)面。因?yàn)檫@個(gè)生命周期是在渲染層觸發(fā)的，在非h5端，js是在邏輯層執(zhí)行的，兩層之間通信是有損耗的。如果在滾動(dòng)過(guò)程中，頻發(fā)觸發(fā)兩層之間的數(shù)據(jù)交換，可能會(huì)造成卡頓。
如果想實(shí)現(xiàn)滾動(dòng)時(shí)標(biāo)題欄透明漸變，在App和H5下，可在pages.json中配置titleNView下的type為transparent。
如果需要滾動(dòng)吸頂固定某些元素，推薦使用css的粘性布局，參考插件市場(chǎng)。插件市場(chǎng)也有其他js實(shí)現(xiàn)的吸頂插件，但性能不佳，需要時(shí)可自行搜索。
在App、微信小程序、H5中，也可以使用wxs監(jiān)聽(tīng)滾動(dòng)；在app-nvue中，可以使用bindingx監(jiān)聽(tīng)滾動(dòng)。onBackPress上不可使用async，會(huì)導(dǎo)致無(wú)法阻止默認(rèn)返回。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-563467.html
應(yīng)用場(chǎng)景
此應(yīng)用場(chǎng)景會(huì)在自定義tabBar時(shí)用得比較多，因?yàn)樽远xtabBar時(shí)，對(duì)應(yīng)的
tabBar頁(yè)面不會(huì)觸發(fā)觸底和滾動(dòng)事件。此時(shí)存放tabBar的父頁(yè)面的觸底和滾動(dòng)事件會(huì)被觸發(fā)，可以借用ref實(shí)現(xiàn)對(duì)應(yīng)tabBar頁(yè)面的函數(shù)調(diào)用。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-563467.html
到了這里，關(guān)于web之移動(dòng)端實(shí)現(xiàn)觸底和觸頂功能、微信小程序、置頂、置底、觸發(fā)、uniApp、onReachBottom、onPageScroll的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
