网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/5/8 浏览:3 次 )

效果图

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

如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态

1获取滚动状态

 onPageScroll(e) {
  this.scrollTop = e.scrollTop
 },

2信息栏监听下拉状态的改变而改变自己的状态

:class="scrollTop>0"

 .head-title-absolute{
  top: 0;position: absolute;
 }
 .head-title-fixed{
  top: 0;position: fixed;
 }

总结

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

上一篇:Vue动态加载异步组件的方法
下一篇:跨域解决之JSONP和CORS的详细介绍
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网