5种uni-app 页面下拉刷新方法

---

一、前言

最近需要在uni-app里使用下拉刷新,研究一下

二、vue页面下拉刷新

1. 步骤一:监听页面下拉刷新动作onPullDownRefresh

//onLoad等生命周期函数同级
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
        onPullDownRefresh() {
            console.log("我要刷新了");
            //此处写开始刷新的代码
        },
		onLoad() {

		},
		methods: {

		}
	}
</script>

2. 步骤二:开启页面下拉刷新功能enablePullDownRefresh pages.json

{
	"pages": [
		{
			"path": "pages/index/pull-down-refresh",
			"style": {
				"navigationBarTitleText": "pull-down-refresh",
                "enablePullDownRefresh":true
			}
		}
	],
	"globalStyle": {
	
	}
}

4. 步骤三:停止刷新动作

//onLoad等生命周期函数同级
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
        onPullDownRefresh() {
            console.log("我要刷新了");
            //此处写开始刷新的代码
            setTimeout(e=>{
                //此处写结束刷新的代码,写在setTimeout里是为了模拟刷新动作执行的时间
                console.log("刷新结束,我要停止刷新动作了");
                uni.stopPullDownRefresh()
                },2000)
            
        },
		onLoad() {

		},
		methods: {

		}
	}
</script>

三、 nvue页面下拉刷新

方法1：同vue页面同样配置,同样效果

方法2：waterfall

使用<refresh>子组件：用于给列表添加下拉刷新的功能。

<template>
    <waterfall column-count="2" column-width="auto">
        <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
            <text>Refreshing ...</text>
            <!-- <loading-indicator></loading-indicator> -->
        </refresh>
        <cell v-for="num in lists">
            <text>{{num}}</text>
        </cell>
    </waterfall>
</template>
<script>
    export default {
        data() {
            return {
                refreshing:null,
                lists: ['A', 'B', 'C', 'D', 'E']
            }
        },
        methods:{
            onpullingdown:function(){
                console.log("下拉的动作");
                this.refreshing = true;//展示refresh元素
            },
            onrefresh:function(){
                console.log("松手触发刷新");
                setTimeout(e=>{
                    this.refreshing = false;//隐藏refresh元素
                },200)
            }
        }
    }
</script>

<style></style>

方法3：list

使用<refresh>子组件：用于给列表添加下拉刷新的功能。

<template>
    <list>
        <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
            <text>Refreshing ...</text>
            <!-- <loading-indicator></loading-indicator> -->
        </refresh>
        <cell>a</cell>
        <cell>b</cell>
        <cell>c</cell>
    </list>
</template>

<script>
	export default {
		data() {
			return {
				refreshing:null,
			}
		},
		methods: {
			onpullingdown:function(){
			    console.log("下拉的动作");
			    this.refreshing = true;//展示refresh元素
			},
			onrefresh:function(){
			    console.log("松手触发刷新");
			    setTimeout(e=>{
			        this.refreshing = false;//隐藏refresh元素
			    },200)
			}
		}
	}
</script>

<style>

</style>

四、还有一种方式,看文档不推荐使用,如有需要可前往下方链接查看

scroll-view - uni-app官网

五、示例源码

Talk is cheap. Show me the code：
5种uni-app 页面下拉刷新方法-源码示例.zip

六、参考文章

1. 下拉刷新
2. waterfall子组件refresh
3. refresh - uni-app官网
4. list子组件refresh
5. scroll-view - uni-app官网