二次理解mescroll组件应用
来源:10-4 热播列表 - 列表的下拉刷新与上拉加载
qq_立文_0
2023-03-06
个人实际操作代码更新:
data中新增两个变量:
- curPageSize : 接口返回的当前页数据长度,注意是,loadHotVideoList()每次请求返回的数据长度。
- 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
我也喜欢这种,之前在原生小程序就是这么写的。多谢分享
00
相似问题