微信小程序局部刷新觸發整頁刷新效果的實現代碼

這篇文章主要介紹了微信小程序局部刷新觸發整頁刷新效果的實現代碼,非常不錯，具有一定的參考借鑑價值，需要的朋友可以參考下

效果圖

如上圖所示，頭部的選項欄時固定的（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;
 }

總結

以上所述是小編給大家介紹的微信小程序局部刷新觸發整頁刷新效果的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！