小程序中下拉刷新页面的功能怎么实现？

发布日期： 2020-05-02 阅读量： 作者： 网络

小程序中下拉刷新页面的功能怎么实现？下面本篇文章给大家介绍一下微信小程序界面下拉刷新实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

小程序中下拉刷新页面的功能怎么实现？

微信小程序中，通过下拉刷新页面是基本操作，在当前页面排满的情况下继续下拉加载更多内容。小程序和网页都可以实现这一功能，不同的是小程序界面有能实现下拉刷新功能的API，只需从系统调用即可。

通过查看微信开发文档可知，enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。enablePullDownRefresh可以写在app.json 中和页面的xxx.json，两者的区别是，app.json 是全局型的下拉刷新，而***.json 是单个页面的下拉刷新，只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键。另一种方法是，监听scroll-view,自定义下拉刷新，scroll-view里面有一个bindscrolltoupper属性，当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利用这个属性，来实现下拉刷新功能。

两种方法都可以，第一种比较简单，易上手，毕竟一些逻辑系统已经给你处理好了，第二种适合那种想要自定义下拉刷新样式的小程序，我们讲解电商，就用第一种，系统提供的就好，主要是教会大家怎么用。

1. home.json 参数配置

enablePullDownRefresh: true

我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是否允许下拉刷新，当然，如何你不想一个个配置允许下拉刷新，你可以直接在全局变量app.json的window里面配置上面这个属性，这样整个项目都允许下拉刷新了,这个一定要加的，因为系统默认是不具备下拉刷新功能的

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

# 小程序

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯609 】【 SEO推广595 】

上一篇: Golang 函数类型安全与其他编程范式的差异是什么？

下一篇: 如何使用 JavaScript 和 jQuery 实现动态下

小程序中下拉刷新页面的功能怎么实现？

随便看看