二次理解mescroll组件应用

来源:10-4 热播列表 - 列表的下拉刷新与上拉加载

qq_立文_0

2023-03-06

个人实际操作代码更新:

data中新增两个变量:

  1. curPageSize : 接口返回的当前页数据长度,注意是,loadHotVideoList()每次请求返回的数据长度。
  2. hasNext:是否有下一页数据默认为false。根据loadHotVideoList()每次请求返回的数据长度,是否等于upOptions中配置的page.num,如果相同即视为还有可能有数据,如果是小于的话,则没有数据为默认false。

没有使用使用老师的方法,在donwCallback和upCallback中来判断是否初始化返回。直接在upOptions和downOptions配置中将auto设为false,这样的话,在mescroll初始化的时候,就不会自动调用upCallback和downCallback方法。

取消了自行设定的page和size变量,直接在mescroll的上拉加载upOptions配置中来进行。

还不完善,慢慢总结~~

<script>
	import {
		getHotVideoList
	} from '../../api/video.js';

	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				videoList: [],
				// 下拉刷新配置
				downOptions: {
					auto: false
				},
				// 上拉加载配置
				upOptions: {
					auto: false,
					page: {
						num: 1,
						size: 10
					},
					empty: {
						top: '暂无相关数据'
					},
					textNoMore: '--- 我也是有底线的 ---'
				},
				// 是否有下一页数据
				hasNext: false,
				// 当前返回数据长度
				curPageLength: 0
			};
		},
		methods: {
			async loadHotVideoList() {
				const {
					data: res
				} =
				await getHotVideoList({
					page: this.upOptions.page.num,
					size: this.upOptions.page.size
				});

				// 当前返回数据的长度
				this.curPageLength = res.list.length;

				// 如果当前页数据长度小于每次设置的返回条数,那么则没有数据
				if (res.list.length == this.upOptions.page.size) this.hasNext = true;

				if (this.upOptions.page.num == 1) {
					this.videoList = res.list;
				} else {
					this.videoList = [...this.videoList, ...res.list];
				}
			},
			// 首次加载
			async mescrollInit(mescroll) {
				await this.loadHotVideoList();
				mescroll.endSuccess(this.curPageLength, this.hasNext);
			},
			// 下拉刷新
			async downCallback(mescroll) {
				this.upOptions.page.num = 1;
				await this.loadHotVideoList();
				mescroll.endSuccess(this.curPageLength, this.hasNext);

			},
			// 上拉加载
			async upCallback(mescroll) {
				this.upOptions.page.num += 1;
				await this.loadHotVideoList();
				mescroll.endSuccess(this.curPageLength, this.hasNext);
			}
		}
	}
</script>
写回答

1回答

我自己种花海

2023-04-16

我也喜欢这种,之前在原生小程序就是这么写的。多谢分享

0
0

uni-app从入门到进阶 系统完成项目实战

专门为小程序0基础学员而设,让你拥有能上线的作品

1126 学习 · 746 问题

查看课程