平台兼容性

关于

之前看了官方文档关于onPullDownRefresh的使用，官方是直接放到onLoad处， 使用了第一次加载也刷新，但是没有在刷新里面调用其他函数的示例，这样新手根本无法理解(因为我就是)。

此模板演示了使用官方接口onPullDownRefresh，然后结合官方教程中提供的新闻api接口做好新闻列表后， 可下拉刷新查看最新新闻，另外有加载中等待图标，关键代码有注释，方便和我一样的新手学习！

PS：此教程只适合新入门新手，大神绕道，文档有什么问题欢迎指出！

如果此模板对你提供了帮助，欢迎好评、赞赏，有问题可以在评论区留言。

下拉刷新使用说明

首先需要在 pages.json 里，找到对应页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。 比如我的是index.vue：

    {
       "path": "pages/index/index",
       "style": {
          "navigationBarTitleText": "演示",
            "enablePullDownRefresh": true //开启刷新
          }
    }

开启后去你的页面下拉一下就有样式效果了。

现在仅仅是有一个样式，还没有执行任何动作， 需要在export default下添加生命周期刷新监听：onPullDownRefresh 然后添加执行的动作(重点)，这样刷新才能有效果

    export default {
        onPullDownRefresh() {
        console.log("开始刷新");
        uni.showLoading({
            title: '加载中...'
        });//出现加载中图标
        this.fresh();//重点在这里，执行你需要执行的动作，和下面methods中一致
        setTimeout(function(){
            console.log("关闭刷新");
            uni.stopPullDownRefresh();//关闭刷新，不关闭会一直刷新不加载内容
        },1000)//1s后关闭刷新
        }
    }   

最后在methods中定义你的函数,这里是以官方教程新闻api为例

    methods: {
        fresh: function(){
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    this.news = res.data;
                    uni.hideLoading();//关闭加载中图标
                    console.log("获取数据完成");
                },
                fail: () => {},
                complete: () => {}
            })
        }
    }

另外说一下uni.startPullDownRefresh uni.startPullDownRefresh相当于你手动下拉一次，也就是执行一次onPullDownRefresh里面的动作，不需要你下拉