如何在小程序中实现下拉刷新页面的功能（小程序滚动-视图下拉更新）

如何在我的小程序中实现下拉刷新页面的功能？下一篇我将介绍如何在微信小程序界面中实现下拉刷新。 有一定的标准值。 请转告给有困难的朋友。 我希望这对你有帮助。

在微信小程序中，使用下拉刷新页面是基本操作。 当前页面满后，继续下拉以加载更多内容。 小程序和网页都可以实现该功能。 不同的是，小程序接口有一个API，您可以简单地从系统中调用该API来实现您需要的下拉刷新功能。

如果你查看微信开发文档，可以看到enablePullDownRefresh属性设置为true。 默认情况下启用下拉更新。 EnablePullDownRefresh可以写在页面的app.json和xxx.json中。 两者的区别在于app.json是全局下拉更新，而***.json是单页面下拉更新。 只能配置与窗口相关的设置。 这是一个决定本页面窗口性能的设置项，所以不需要写窗口键。 另一个选择是监听scroll-view并自定义下拉列表更新。 scroll-view 有一个 bindscrolltoupper 属性。 向上/向左滚动会触发scrolltoupper事件，因此可以使用该属性来实现下拉更新功能。

两种方法都可以。 第一个相对简单且易于使用。 毕竟有些逻辑系统已经处理好了。 第二种方法适合需要自定义下拉列表更新样式的小程序。 在描述电子商务时，我们将使用系统提供的第一个。 主要目的是教大家如何使用。

1.home.json参数设置

enablePullDownRefresh: true

哪个页面需要下拉刷新，在该页面的属性中配置即可。对应的xxx.json文件。 该属性的字面含义告诉您是否允许更新下拉列表。 当然，如果不想将每个配置都配置为允许下拉更新，可以直接在窗口的全局变量app.json中配置上述属性。这允许更新整个项目的下拉列表。 由于系统默认没有下拉更新功能，因此需要添加此功能。

home.js

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

onPullDownRefresh 下拉 监听刷新事件，特别是wx看看.showNavigationBarLoading()和wx里面的代码.hideNavigationBarLoading()。 这两个语句用来控制小菊花的可见和隐藏。 这还不存在。 根据网络请求，我模拟了网络负载，并通过setTimeout方法创建了一个延时方法。 此方法允许您模拟网络负载下所花费的时间。 一旦网络完成加载，您还应该停止下拉更新wx.stopPullDownRefresh。 ()。

加载更多

加载更多的方法有两种。

1. 调用系统API。

2. 监视器滚动-视图，将滚动绑定到监视器底部的下部幻灯片。

该过程与下拉更新略有不同，但相似。

home.js

onReachBottom: function () {console.log(\'加载更多\')setTimeout(() => {this.setData({ isHideLoadMore:true,recommends: [ {goodId: 7, 姓名:\'....\',url:\'....\',imageurl:\'....\',},{goodId: 10,名称:\'.. ..\',url:\'....\',},] ,})}, 1000)}

onReachBottom系统提供的底部事件监听同： 更新下拉菜单。 另外模拟一些数据，添加一个延时事件isHideLoadMore。 这是

Loading

的自定义值，用于控制加载控件的可见性。

home.wxml

Loading

还有其他方法可以在模仿 H5 网页的小程序中实现下拉更新。 不过微信小程序使用API​​接口，可以减轻开发者实现下拉更新功能时的负担。 。

推荐：《小程序开发教程》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP入门？怎样才能快速学习PHP呢？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 介绍如何用小程序生成参数二维码（二维码+小程序参数）
• 如何在微信小程序中实现购物车功能？（方法介绍）（如何使用微信小程序购物车）
• 如何构建我的小程序开发项目？（教程）（微信小程序开发实用支持资源）
• 小程序通过函数调优来解决多次页面跳转的问题（小程序跳出率）。
• 小程序API可以提供哪些功能？（小程序API教程）

本文由主机参考刊发，转载请注明：如何在小程序中实现下拉刷新页面的功能（小程序滚动-视图下拉更新） https://zhujicankao.com/124177.html