小程序下拉刷新

Posted 2023-04-19

参考技术A 下拉刷新需要在index.json中添加属性：

Index.js

可以看到，我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据，并且页面显示数据的数组清空， 页码设置成1，重新加载数据。

小程序-下拉刷新

框架---小程序配置---页面配置

属性 类型 默认值 说明

enablePullDownRefresh boolean false 是否开启当前页面下拉刷新

onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离（px）

 

 

如果是全局都需要下拉刷星，在app.json中配置：

        {
            "window":{
                "enablePullDownRefresh":true
            }
        }

 

如果是指定页面（detail.wxml）需要下拉刷新，在detail.json中配置：

        "enablePullDownRefresh":true

　　　　注意：在这里的配置会覆盖掉app.json中window中相同的配置项

　　　　此时，在detail.js中：

            Page({
                onPullDownRefresh(){
                    // 执行请求数据的方法
                    init();
                }
            })

　　　　此时，下拉松手后会隔一段时间才会复位，解决：

　　　　　　API---界面---下拉刷新

　　　　　　wx.stopPullDownRefresh()

　　　　　　示例代码：

            Page({
                onPullDownRefresh () {
                    wx.stopPullDownRefresh()
                }
            })