小程序中实现下拉刷新和加载更多效果的方法（小程序下拉选择框）

本文介绍了在微信小程序中实现下拉刷新和加载更多效果的几种方法。几乎所有的应用都有下拉刷新，加载更多。希望大家都能掌握！

【相关学习推荐:小程序开发教程】

# #下拉刷新目前实现下拉刷新有两种方式。

1.调用系统的API。该系统具有提供下拉刷新的API接口。

2.监听scroll -视图，自定义下拉刷新。还记得scroll -视图中有一个bindscrolltoupper属性吗？如果忘记了，请回顾上一篇微信小程序文章-电子商务(2)当滚动到顶部/左侧时，会触发scrolltoupper事件，所以我们可以利用这个属性实现下拉刷新功能。

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

1.home.json参数配置

"enablePullDownRefresh & quot:true我们需要在xxx.json文件中配置上述属性对应哪个页面。这个属性从字面上也可以知道。当然，如果不想一个一个配置，可以直接在全局变量app.json的窗口中配置上述属性，这样就允许刷新整个项目。这个必须加，因为系统默认没有下拉刷新功能。

2、home.js

//下拉刷新onpullDownrefresh:function(){ wx。ShowNavigationBarloading()//Show load//模拟负载setTimeout(function(){//complete wx . hideninavigationbarloading()//完成停止加载wx.stopPullDownRefresh() //停止下拉刷新}，1500)；},

OnPullDownRefresh下拉刷新事件监控，具体看一下里面的代码。wx.showNavigationBarLoading()和wx.hideNavigationBarLoading()用于控制一个叫秋花的人的显示和隐藏。由于我们还没有解释网络请求，我将模拟网络负载。通过setTimeout方法，写一个延时方法，可以模拟网络加载所消耗的时间，在网络加载完成的时候，我们要停止下拉刷新wx.stopPullDownRefresh()。

到目前为止，这个下拉刷新功能已经完成，但还不完善。还是有点奇怪，就是下拉刷新没有动画，也没有木头~当时我也很惊讶。微信套餐下拉刷新怎么会这样？后来参考别人写的代码发现了一个小坑。我们先来看看填坑的效果。

怎么样？是不是顺眼多了？想知道我是怎么加入这部动画的吗？我来给你揭秘一下。其实很简单。你只需要一句话就可以在app.json的窗口中配置以下属性，这是配置整个系统的背景颜色。为什么当我配置系统颜色时，会出现下拉刷新？原因是动画本身有下拉刷新，但我们不配置背景色时，系统默认为白色，动画也可用。

"背景颜色& quot:& quot# f0145a & quot# #加载更多有两种方式。

调用系统的API

显示器scroll -视图，将scrolltolower滑动到显示器底部。

我来解释第一个实现方法。处理方法和下拉刷新略有不同，但差不多。以首页为例。

1、home.js

//Load more onReachBotom:function(){ console . log(&；#39;加载更多&；#39;)setTimeout(()= & gt；{ this . setdata({ isHideLoadMore:true，建议:

# #总结今天到此为止。下拉刷新和加载是前端程序比较必要的知识。几乎所有app都有下拉刷新，加载更多，大家一定要掌握。这里主要解释一下小程序自带的下拉刷新和加载更多API。可以尝试第二种方式挑战一下，体会一下~

更多编程相关知识，请访问:编程视频！！

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

• 浅谈小程序中实现下拉刷新加载更多效果的方法

本文由主机参考刊发，转载请注明：小程序中实现下拉刷新和加载更多效果的方法（小程序下拉选择框） https://zhujicankao.com/113119.html