uni-app微信小程序scroll-view自定义下拉刷新

<template>
	<view>
		<nav-bar showback>全部课程</nav-bar>
		<!-- 选择器 -->
		<view class="w-100 allLessons" :style="'top:' + addHeight + 'px;'"><tabs :items="lessonArr"></tabs></view>

		<!-- 占位 -->
		<view class="w-100" style="height: 92rpx;"></view>
		<!-- 课程组件 -->

		<scroll-view
			scroll-y="true"
			:style="'height:' + readHeight + 'px;'"
			refresher-enabled
			refresher-background="#38BCDD"
			:refresher-triggered="triggered"
			:refresher-threshold="45"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
		>
			<!-- 内容部分 -->
			<view class="w-686 ma0 ">
				<!-- 排序方式 default=综合排序 0 latest=最新课程 1 -->

				<view class="container-wrapper  j-sb d-flex" v-for="(item, index) in numOneOfDecide" :key="index" @click="inCourseDetail(item.id)">
					<!-- 可以遍历计算属性 -->
					<!-- <view v-if="numberWho == 0?true:false" class="container-wrapper  j-sb d-flex" v-for="(item, index) in numOneOfDecide" :key="index"> -->

					<!-- <view  v-if="numberWho == 1?true:false" class="container-wrapper  j-sb d-flex" v-for="(item, index) in latestLesson" :key="index"> -->

					<template>
						<!-- :style="{ backgroundImage: 'url(' + item.cover + ')' }" -->

						<!--  赋值给背景图图片的大小难以控制-->
						<!-- 			<view class="left"  v-if="item.cover !== ''?true:false" :style="{background :'url('+ item.cover+');'}">			 -->
						<view class="left" v-if="item.cover !== '' ? true : false">
							<image :src="item.cover" mode="" class="w-100 h-100" style="border-radius: 16rpx;"></image>
							<image src="../../static/images/home/icon_is_vip.png" class="vip"></image>
						</view>
						<view class="left" v-else><image src="../../static/images/index/nopic.jpg" mode="" class="w-100 h-100"></image></view>
					</template>

					<view class="right">
						<view class="right-text">{{ item.title }}</view>
						<view class="rig-box d-flex a-center " style="height: 56rpx;">
							<view class="left" style="width: 80rpx;height: 40rpx;"><image src="../../static/images/home/tuwen.png" style="width: 100%;height: 100%;"></image></view>
							<view class="center">免费</view>
							<view class="right">{{ item.learn_number }}人在学</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import tabs from '@/components/zzx-tabs/zzx-tabs.vue';

export default {
	components: {
		tabs
	},
	data() {
		return {
			// 上拉加载 page++
			page: 1,
			// page:'',
			defaultLesson: [],
			latestLesson: [],
			//默认是左边
			numberType: 0,

			lessonArr: ['综合排序', '最新课程'],
			// 下拉刷新的状态
			triggered: false, //trigger触发的意思   下拉刷新是否被触发
			freshing: false, // 是否正在刷新
			pageNum: 0
		};
	},
	computed: {
		numOneOfDecide() {
			return this.numberType == 0 ? this.defaultLesson : this.latestLesson;
		},
		readHeight() {
			return this.scrollHeight - 46;
		}
	},
	onLoad() {
		this.freshing = false;
		setTimeout(() => {
			//一进来页面就刷新

			this.triggered = true;
			//调用获取列表的方法
			this.getDefaultLessons();
			this.getNewLessons();
			
		}, 500);
	},
	//页面关闭要把 clickItem监听取消
	onUnload() {
		uni.$off('clickItem'); //在此生命周期里销毁地址改变事件的监听
	},
	methods: {
		// 自定义下拉刷新控件被下拉
		onPulling(e) {
			// console.log('onpulling', e);
			this.triggered = true; // 需要重置
			this.page = 1;
		},
		// 自定义下拉刷新被触发
		onRefresh() {
			if (this.freshing) return; //如果你现在处于下拉刷新就不能在刷新了
			this.freshing = true;

			//界面下拉触发，triggered可能不是true，要设为true
			if (!this.triggered) {
				this.triggered = true;
			}
			//获取列表接口  最新课程 和 综合课程都刷新
			this.getDefaultLessons();
			this.getNewLessons();
			
			setTimeout(() => {
				this.triggered = false;
				this.freshing = false;
				uni.showToast({
					title:'已更新了课程列表',
					icon:'none'
				})
			}, 2000);
			
		},
		// 自定义下拉刷新被复位
		onRestore() {
			console.log('自定义下拉刷新被复位onRestore');
			this.triggered = false;
			this.freshing = false;
		},
		// 自定义下拉刷新被中止
		onAbort() {
			this.triggered = false;
			console.log('自定义下拉刷新被中止onAbort');
			this.triggered = false;
			this.freshing = false;
		},
		//进入页面
		inCourseDetail(detId) {
			//加载层
			uni.showLoading();

			uni.navigateTo({
				url: '/pages/lessonDetail/lessonDetail?id=' + detId,
				success: () => {}
			});
			setTimeout(uni.hideLoading(), 2000);
		},
		//综合课程
		getDefaultLessons() {
			this.$req
				.get(
					'/api/course/courses',
					{
						page: this.page,
						sort: 'default'
					},
					{
						token: false
					}
				)
				.then(res => {
					console.log('请求综合课程列表成功:', res);
					this.defaultLesson = res.data;
					console.log(this.defaultLesson);
				})
				.catch(err => {
					console.log('请求综合课程列表失败:', err);
				});
		},
		//最新课程
		getNewLessons() {
			this.$req
				.get(
					'/api/course/courses',
					{
						page: this.page,
						sort: 'latest'
					},
					{
						token: false
					}
				)
				.then(res => {
					console.log('请求最新课程列表成功:', res);
					this.latestLesson = res.data;
					console.log(this.defaultLesson);
				})
				.catch(err => {
					console.log('请求最新课程列表失败:', err);
				});
		},
		//决定是左边还是有点的课程
		selected() {
			//刚进来的是没有点击  就没有执行这一步赋值操作
			uni.$on('clickItem', val => {
				console.log('selected:', val);
				this.numberType = val;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.allLessons {
	z-index: 100;
	background-color: #fff;
	height: 92rpx;
	position: fixed;
	right: 0;
	left: 0;
}

// kecheng
.container-wrapper {
	padding-top: 32rpx;
	box-sizing: border-box;
	width: 100%;
	height: 234rpx;
	// background-color: #0470d9;
	margin-bottom: 34rpx;
	// box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(0, 0, 0, 0.1);

	.left {
		position: relative;
		width: 288rpx;
		height: 180rpx;
		border-radius: 16rpx;
		// background-color: #555555;
		// background-size: cover;
		background-size: contain;

		// background-size:100%;第二值为auto
		background-repeat: no-repeat;

		.vip {
			width: 72rpx;
			height: 40rpx;
			position: absolute;
			left: 16rpx;
			bottom: 16rpx;
		}
	}

	.right {
		width: 366rpx;
		height: 180rpx;
		// background-color: #ebf3fb;
	}
}

.right-text {
	height: 112rpx;
	line-height: 56rpx;
	font-size: 32rpx;
	color: #000000;
	margin-bottom: 12rpx;
}

.rig-box {
	// background-color: #576B95;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;

	.left {
	}

	.center {
		margin-left: 16rpx;
		width: 118rpx;
		height: 56rpx;
		font-size: 26rpx;
		color: #e74c3c;
		line-height: 56rpx;
		// background-color: #ffb400;
	}

	.right {
		// background-color: blue;
		margin-left: 16rpx;
		width: 140rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.45);
		line-height: 56rpx;
	}
}
</style>