微信小程序局部刷新觸發(fā)整頁刷新效果的實(shí)現(xiàn)代碼
更新時(shí)間：2018年11月21日 14:52:31 作者：白馬湖小龍王
這篇文章主要介紹了微信小程序局部刷新觸發(fā)整頁刷新效果的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
效果圖
如上圖所示，頭部的選項(xiàng)欄時(shí)固定的（fixed），下部的信息欄是滾動(dòng)的, 由于頭部是fixed所以無法實(shí)現(xiàn)下拉刷新的效果，如果去掉fixed當(dāng)我們上拉的時(shí)候，選項(xiàng)欄又無法固定，所以我們需要監(jiān)聽頁面下拉的狀態(tài)隨時(shí)改變選項(xiàng)欄的狀態(tài)
1獲取滾動(dòng)狀態(tài)
onPageScroll(e) {
this.scrollTop = e.scrollTop
},
2信息欄監(jiān)聽下拉狀態(tài)的改變而改變自己的狀態(tài)
:class="scrollTop>0?'head-title-fixed':'head-title-absolute'"
.head-title-absolute{
top: 0;position: absolute;
}
.head-title-fixed{
top: 0;position: fixed;
}
總結(jié)
以上所述是小編給大家介紹的微信小程序局部刷新觸發(fā)整頁刷新效果的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
可以用來運(yùn)行代碼的函數(shù)，跟本網(wǎng)站的都差不多。2009-05-05
這篇文章主要介紹了JS ES6異步解決方案，對異步感興趣的同學(xué)，可以參考下2021-04-04
Javascript的各種節(jié)點(diǎn)操作實(shí)例演示代碼
實(shí)例演示對javascript的節(jié)點(diǎn)的各種操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等2012-06-06
工作小知識(shí)積累，獲取圖片的大小，需要的朋友可以參考下。2011-09-09
JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之Map和Set的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加css樣式和script標(biāo)簽的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JavaScript中所有聲明變量的方式及特性總結(jié)
在JavaScript中,變量的定義是編程的基礎(chǔ),而JavaScript提供了多種靈活的方式來定義變量,本文將詳細(xì)盤點(diǎn)JavaScript中所有變量定義的方式,并結(jié)合代碼示例進(jìn)行說明,需要的朋友可以參考下2025-01-01
Javascript中引用類型傳遞的知識(shí)點(diǎn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Javascript中引用類型傳遞的知識(shí)點(diǎn)，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
本文介紹了JavaScript中六種主要的繼承實(shí)現(xiàn)方式及其適用場景,并推薦在現(xiàn)代項(xiàng)目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點(diǎn)和適用范圍,選擇合適的繼承方式對于編寫清晰、高效的JavaScript代碼至關(guān)重要,感興趣的朋友一起看看吧2025-02-02
JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法
這篇文章主要介紹了JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法,需要的朋友可以參考下2018-11-11