微信小程序界面下拉刷新实现方法

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

1. home.json 参数配置

enablePullDownRefresh: true

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

home.js

//下拉刷新

onPullDownRefresh:function()

{

wx.showNavigationBarLoading() //在标题栏中显示加载

//模拟加载

setTimeout(function()

{

// complete

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh() //停止下拉刷新

},1500);

},

onPullDownRefresh 下拉刷新事件监听，具体看一下里面的代码，wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏，由于我们现在还没有讲解网络请求，所以我就模拟了一下网络加载，通过setTimeout方法，写一个时间延迟的方法，这个方法可以模拟网络加载所消耗的时间，还有就是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh() 。

加载更多

实现加载更多也同理有两种方式

1. 调用系统的API

2. 监听scroll-view，bindscrolltolower滑动到底部的监听

处理方式和下拉刷新略有不同，不过也大同小异。

home.js

onReachBottom: function () {

console.log(加载更多)

setTimeout(() => {

this.setData({

isHideLoadMore:true,

recommends: [

{

goodId: 7,

name:.....,

url: ....,

imageurl:......,

},

{

goodId: 10,

name:......,

url:......,

},

],

})

}, 1000)

}

onReachBottom系统提供的触底事件的监听，和下拉刷新一样，我们也是模拟一些数据，加了一个时间延迟的事件，isHideLoadMore，一个自定义的值，用来控制显示和隐藏加载控件

正在加载