效果圖
如上圖所示,頭部的選項欄時固定的(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ù)大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答