ios微信小程序下拉刷新怎么配_浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh 。而实现上拉加载相对来说就比较不方便了。

下拉刷新

虽然微信的官方文档有很多坑，但下拉刷新介绍的还是很全面的。在这里稍稍带过。首先在全局 config 中的 window 配置 enablePullDownRefresh .

在 Page 中定义 onPullDownRefresh 钩子函数。到达下拉刷新条件后，该钩子函数执行，发起请求方法。

请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新。

config

config = {

pages: [

'pages/index'

],

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#ccc',

navigationBarTitleText: 'WeChat',

navigationBarTextStyle: '#000',

enablePullDownRefresh: true

}

}复制代码

page

onPullDownRefresh() {

wepy.showNavigationBarLoading()

setTimeout(()=>{

this.getData = '数据拿到了'

wepy.stopPullDownRefresh()

wepy.hideNavigationBarLoading()

this.$apply()

},3000)

}复制代码

效果如下：

你会发现下拉的过程有些僵硬。这实际上是没有添加背景色的原因，加上背景色后再试试。

现在感觉好多了吧。下拉刷新有现成的配置和方法，很容易实现，可上拉加载就不同了。

上拉加载

首先看一下要实现的效果，这是3g端的上拉加载。小程序要实现同样的效果。

首先功能有点击回到顶部 这个很好实现，有对应的回到顶部函数

滑动屏幕记录当前页数 这个也很好实现，主要是监听滚动事件，判断对应滚动条高度，去计算其与子容器的高度即可。

上拉加载动画

这里有两个实现的方案。一个是 page 自带的