微信小程序局部刷新触发整页刷新效果的实现代

这篇文章主要介绍了微信小程序局部刷新触发整页刷新效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图

微信小程序局部刷新触发整页刷新效果的实现代

如上图所示,头部的选项栏时固定的(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; }

总结

以上所述是小编给大家介绍的微信小程序局部刷新触发整页刷新效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7c93f716f95d4334b333cca3afb2f55e.html