效果圖

如上圖所示，頭部的選項(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)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！