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

效果图

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

总结

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

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。