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