效果圖
如上圖所示,頭部的選項欄時固定的(fixed),下部的信息欄是滾動的, 由于頭部是fixed所以無法實現下拉刷新的效果,如果去掉fixed當我們上拉的時候,選項欄又無法固定,所以我們需要監聽頁面下拉的狀態隨時改變選項欄的狀態
1獲取滾動狀態
onPageScroll(e) { this.scrollTop = e.scrollTop },
2信息欄監聽下拉狀態的改變而改變自己的狀態
:class="scrollTop>0?'head-title-fixed':'head-title-absolute'" .head-title-absolute{ top: 0;position: absolute; } .head-title-fixed{ top: 0;position: fixed; }
總結
以上所述是小編給大家介紹的微信小程序局部刷新觸發整頁刷新效果的實現代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!
新聞熱點
疑難解答