HBuilderX uni-app实现下拉刷新操作

方法一：

 scroll-view 用法：

属性参数设置看官方文档吧

参考文档：scroll-view | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/scroll-view.html想看刷新执行流程的直接复制

<template>
    <view>
        <scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true"             
                     :refresher-triggered="triggered"
                     :refresher-threshold="100" refresher-background="lightgreen" 
                     @refresherpulling="onPulling"
                     @refresherrefresh="onRefresh" @refresherrestore="onRestore" 
                     @refresherabort="onAbort">
            <!-- 里面直接放数据列表即可 -->
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                triggered: false
            }
        },
        onLoad() {
            this._freshing = false;
            //官方文档这里是设置的页面加载后直接进入刷新也就是↓下面第2步
            //setTimeout(() => {
            //    this.triggered = true;
            //}, 1000)
        },
        methods: {
           // 下拉刷新操作
			//1、触发下拉操作（非刷新）
			onPulling(e) {
				alert("触发下拉操作");
				console.log(e)
				this.triggered = true;
			},
			//2、触发刷新
			onRefresh() {
				alert("触发刷新");
				if (this._freshing) return;
				this._freshing = true;
				// 添加定时器1秒后执行的操作
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			//3、触发重置
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				alert("触发重置");
			},
			//4、触发终止
			onAbort() {
				alert("触发终止");
			}
        }
    }
</script>

 @refresherrestore="onRestore"这里第四步基本不会触发事件 因为到第三步重置的时候就可以结束刷新了 所以onAbort()这里自行发挥吧

小tips：methods这里写完方法要加逗号！写完方法要加逗号！写完方法要加逗号！重要的事情说三遍！因为我老是忘😫😫

修改scroll-view下拉刷新里面箭头和圈的颜色：

    /* 修改刷新圈颜色 */
    /*里面圆圈的颜色*/
	/deep/.uni-scroll-view-refresh__spinner>circle{
	color:#166bf880 !important;
	}
    /*外面箭头的颜色*/
	/deep/.uni-scroll-view-refresh-inner>svg {
	fill: #166bf880 !important;
	}

方法二：

onPullDownRefresh()的用法：

pages.json文件里设置："enablePullDownRefresh": true,

//pages单页面添加
{
	"path": "pages/main/message",
	"style": {
		"navigationBarTitleText": "",
		"navigationStyle":"custom",
		"enablePullDownRefresh": true,   //true开启页面下拉刷新
		"app-plus":{
			"titleView":false
		}
	}
},

//或者全部页面添加
"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
    "enablePullDownRefresh": true,      //true开启页面下拉刷新
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8"
},

json文件里设置完之后：添加onPullDownRefresh()

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		created() {
			
		},
		mounted(){
		
		},
        //添加方法
		onPullDownRefresh() {
			alert(1)    //下拉后直接执行	
            uni.stopPullDownRefresh()	//刷新后终止	
	    },
		
		methods: {
			
		
		}
	}
	
</script>