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

来源：动视网责编：小采时间：2020-11-27 22:03:36

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

微信小程序局部刷新触发整页刷新效果的实现代码:效果图如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onP

推荐度：

点击下载本文 文档为doc格式

导读微信小程序局部刷新触发整页刷新效果的实现代码:效果图如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onP

效果图

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

总结

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

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

推荐度：

点击下载本文 文档为doc格式

标签：小程序微信小程序局部

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐