scroll-view-refresher-props.uvue

<template>
	<view style="flex:1;">
		<page-head title="下拉刷新的scroll-view属性示例"></page-head>
		<view class="uni-margin-wrap">
			<scroll-view scroll-y="true" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
				:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
				:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
				@refresherabort="refresherabort" style="width: 100%;height: 100%;">
				<view class="item" :id="item.id" v-for="(item,_) in items">
					<text class="uni-text">{{item.label}}</text>
				</view>
			</scroll-view>
		</view>

		<scroll-view class="uni-list" showScrollbar="true">
			<view class="uni-common-pb"></view>
			<text style="font-size: 12;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
			<view class="uni-common-pb"></view>
			<view class="uni-option">
				<text>是否开启下拉刷新</text>
				<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
			</view>
			<view class="uni-option">
				<text>设置下拉刷新状态</text>
				<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
					@change="refresherTriggered=!refresherTriggered"></switch>
			</view>

			<view class="uni-option">
				<text>设置下拉刷新阈值</text>
				<input style="width: 100rpx;border-width: 2rpx;text-align: center;  border-style: solid;" :disabled="!refresherEnabled"
					:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
			</view>

			<view class="uni-option">
				<text>设置下拉刷新区域背景颜色</text>
				<input style="width: 200rpx;border-width: 2rpx;text-align: center; border-style: solid;" :disabled="!refresherEnabled"
					:value="refresherBackground" @input="handleRefresherBackground" />
			</view>

			<view style="height: 200rpx;padding: 20rpx; ">
				<text>设置下拉刷新默认样式</text>
				<view class="uni-common-pb"></view>
				<view style="flex-direction: row;">
					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
						@click="refresherDefaultStyle = `none`">none</button>
					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
						@click="refresherDefaultStyle = `black`">black</button>
					<button style="padding: 5rpx;" type="primary" size="mini"
						@click="refresherDefaultStyle = `white`">white</button>
				</view>
			</view>

			<view class="uni-common-pb"></view>
		</scroll-view>

	</view>
</template>

<script>
	type Item = {
		id : string,
		label : string,
	}
	export default {
		data() {
			return {
				items: [] as Item[],
				refresherEnabled: false,
				refresherTriggered: false,
				refresherThreshold: 45,
				refresherDefaultStyle: "white",
				refresherBackground: "transparent",
			}
		},
		onLoad() {
			for (let i = 0; i < 10; i++) {
				const item = {
					id: "item" + i,
					label: "item" + i,
				} as Item;
				this.items.push(item);
			}
		},
		methods: {
			handleTrunOnRefresher() {
				this.refresherTriggered = false;
				//不能同时关闭下拉状态和关闭下拉刷新。
				setTimeout(() => {
					this.refresherEnabled = !this.refresherEnabled;
				}, 0)
			},
			handleRefresherThresholdInput(e : InputEvent) {
				const value = e.detail.value;
				if (value == "") {
					this.refresherThreshold = 45;
				} else {
					this.refresherThreshold = parseInt(e.detail.value);
				}
			},

			handleRefresherBackground(e : InputEvent) {
				const value = e.detail.value;
				this.refresherBackground = value;
			},
			//响应事件
			refresherpulling() {
				console.log("下拉刷新控件被下拉");
			},
			refresherrefresh() {
				console.log("下拉刷新被触发");
				this.refresherTriggered = true;
		        //不能同时关闭下拉状态和关闭下拉刷新。
		        setTimeout(() => {
		        	this.refresherTriggered = false;
		        }, 1500)
			},
			refresherrestore() {
				console.log("下拉刷新被复位");
			},
			refresherabort() {
				console.log("下拉刷新被中止");
			}
		}
	}
</script>

<style>
	.uni-margin-wrap {
		height: 400rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.item {
		justify-content: center;
		align-items: center;
		height: 400rpx;
		width: 100%;
		background-color: azure;
		border-width: 2rpx;
    border-style: solid;
		border-color: chocolate;
	}

	.uni-text {
		color: black;
		font-size: 50px;
	}

	.uni-list {
		flex: 1;
		margin: 50rpx 50rpx 0rpx 50rpx;
	}

	.uni-option {
		height: 100rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}

	.picker-view {
		width: 100%;
		height: 320px;
		margin-top: 10px;
	}
</style>