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

效果图

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

总结

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

您可能感兴趣的文章:

• 微信小程序实现列表下拉刷新上拉加载
• 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
• 微信小程序实现下拉刷新和轮播图效果
• 微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）
• 微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（一）
• 微信小程序 列表的上拉加载和下拉刷新的实现
• 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
• 微信小程序 详解下拉加载与上拉刷新实现方法
• 微信小程序（六）：列表上拉加载下拉刷新示例
• 详解微信小程序开发之下拉刷新 上拉加载
• 微信小程序 实现列表刷新的实例详解