uniapp scroll-view 自定义下拉刷新

uniapp scroll-view 自定义下拉刷新详解

		<scroll-view scroll-y :style="'height:'+listHeight+'px;'" class="list" @scrolltolower="getData"
			:lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered" :scroll-top='topNum'
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" v-if="recordList.length>0">
			<view class="single" v-for="(item,index) in recordList" :key="index">
				<view>内容</view>
			</view>
			<view class="noMore" v-if="isEnd">--暂无更多--</view>
		</scroll-view>

data() {
			return {
				page: 1,
				pageSize: "15",
				isEnd: '',
				recordList: [],
				keyword: '',
				isEnd: false,
				isEmpty: false,
				listHeight: uni.getSystemInfoSync().windowHeight,
				triggered: false,
				_triggered: false,
				topNum: 0, //scrollView 位置

			}
		},

        onLoad() {
			this.refresh()
		},
		methods: {
			refresh() {
				let that = this
				that.page = 1;
				that.isEnd = false
				that.isEmpty = false
				that.topNum = 0
				that.getData()
			},

			onRefresh() {
				console.log("自定义下拉刷新被触发");
				let that = this;
				if (that._triggered) {
					return;
				}
				that._triggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!that.triggered) {
					that.triggered = true;
				}
				this.getData();
			},

			onRestore() {
				console.log("自定义下拉刷新被复位");
				this.triggered = false;
				this._triggered = false;
				console.log("onRestore");
			},

			getData() {
				let that = this
			   //这里是调用后台接口的方法数据

				setTimeout(() => {
					this.triggered = false; //触发onRestore，并关闭刷新图标
					this._triggered = false;
				}, 500)
			},
      }