微信小程序如何实现局部刷新触发整页刷新效果-创新互联

小编给大家分享一下微信小程序如何实现局部刷新触发整页刷新效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专注于运河网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供运河营销型网站建设，运河网站制作、运河网页设计、运河网站官网定制、成都小程序开发服务，打造运河网络公司原创品牌,更为您提供运河网站排名全网营销落地服务。

效果图

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

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

以上是“微信小程序如何实现局部刷新触发整页刷新效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站栏目：微信小程序如何实现局部刷新触发整页刷新效果-创新互联
标题URL：http://kswjz.com/article/dsdpej.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

微信小程序如何实现局部刷新触发整页刷新效果-创新互联

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP