uniapp-如何上下拉刷新

<template>
	<div class="body2"> 
		                                                              <!-- 他是回调函数                  这里是配置项  下拉的配置项   上拉配置项 -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<div class="kecheng">
				<div class="liebiao" v-for="lie in liebiaoss" :key="lie.id">
					<div class="liebiao1">
						<navigator open-type="navigate" @click="nato(lie.id)" class="na">
							<image :src="lie.cover"></image>
						</navigator>
					</div>
					<div class="liebiao2">
						<div class="like">
							{{lie.title}}
						</div>
						<div class="img">
							<div class="left">推荐指数</div>
								<div class="imgs">
									<uni-rate allow-half :value="lie.recommend_rate" color="#bbb" active-color="red" size="15" readonly/>
								</div>
						</div>
					</div>
				</div>
			</div>
		</mescroll-uni>
	</div>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				liebiaoss: [],
				upOption: {
					page: {
						size: 4 // 每页数据的数量,默认10 
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad() {
			const that = this;
			uni.setNavigationBarTitle({
				title: "优化课程"
			})
			// uni.request({
			// 	url:"http://192.168.31.51:9001/mobile/home/course/page?pageNum=1&pageSize=10",
			// 	method:"GET",
			// 	success(ser) {
			// 		that.liebiaoss=ser.data.data.rows
			// 		console.log(that.liebiaoss)
			// 	}
			// })
		},
		methods: {
			nato(ids) {
				uni.navigateTo({
					url: "/pages/index/optimization?id=" + ids
				})
			},
			// 下拉刷新回调 也就是 下拉刷新
			downCallback(page) {
				this.mescroll.resetUpScroll()
				console.log('下拉刷新')
				console.log(page)
			},
			// 上拉加载的回调  page --- 组件为我们提供的数据
			upCallback(page) {
				const that = this;
				let result = ''
				console.log(page.num+"@@@")

				uni.request({
					// 这里我们的页数就是组件提供的 因为我们下拉加载的原理其实就是翻页 使用他的 就会自动翻页  
					// 所以我们需要再下拉加载的回调函数中调用接口 发送请求获取数据
					// 因为传参方式 是再链接后面拼接 所以使用模板字符串
					url: `http://192.168.31.51:9001/mobile/home/course/page?pageNum=${page.num}&pageSize=${page.size}`,
					method: "GET",
					success(ser) {
						console.log('获取数据')
						// that.liebiaoss=ser.data.data.rows
						setTimeout(() => {
							// 获取数据成功的回调  如果不使用他的话 页面会一直处于加载状态
						 that.mescroll.endSuccess(that.liebiaoss.length)
						}, 800)
						// console.log(that.liebiaoss)  因为
						result = ser.data.data.rows
						//如果是第一页需手动制空列表  刷新的时候page.num 一定等于1
						if (page.num == 1) that.liebiaoss = [] // 因为我们下拉刷新的时候还会调用这个方法 然后数据再拼接的话会重复 所以先清空
						//追加新数据
						console.log(result, 'res')
						// console.log(that.liebiaoss,'第一页数据')
						that.liebiaoss = that.liebiaoss.concat(result)
						// 这样就能正常完成这个效果了  但是这些东西都得写过去
					}
				})
				console.log('上拉加载')
			},

		}
	}
</script>

<style scoped lang="less">
	@import '@/pages/style/courseoptimization.less';
</style>