关于 uni-app之scroll 的 下拉刷新 和 上拉加载,理解其中triggered的作用。
<template>
<view class="base_box">
<scroll-view class="scroll_box" scroll-y :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="onRefreshPage"
refresher-background="#666666" @scrolltolower="onRequestMore" @refresherrestore="onRestore">
<view v-if="dataList.length > 0" class="list_box">
<view class="list_item" v-for="(item, i) in dataList" :key="i">
<text style="color: #333333;">{{'--- --- ' + i + ' --- ---'}}</text>
</view>
<view style="width: 710rpx;height: 60rpx; line-height: 60rpx;text-align: center;color: #333333;">{{loadStatus}}</view>
</view>
<view v-if="dataList.length == 0" class="list_box_none">
<view class="data-none">
<!-- <image src="/static/images/none.jpg" mode="aspectFill"></image> -->
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [],
pageInfo: {
/* totalCount 总项数 */
// totalCount: 0,
/* pageCount 总页数 */
// pageCount: 0,
/* pageSize 一页请求的项数 */
pageSize: 10,
/* currPageIndex 当前页码: 若从1开始 则赋值为0;若从0开始 则赋值为-1 ... */
currPageIndex: 0,
},
/* triggered的作用:
(1) true -> false 此时若scroll存在顶部偏移,则可触发偏移消失。
(2) false -> true 此时若scroll没有顶部偏移,则可触发偏移出现以及下拉刷新事件。 */
triggered: false,
/* loadStatus的取值: loadmore \ onmore */
loadStatus: "loadmore",
};
},
onLoad(option) {
console.log("track_onLoad.");
// this._freshing = false; // I think it should be deleted.
setTimeout(() => {
console.log("track_onLoad_2.");
this.triggered = true;
}, 200);
},
onShow() {},
computed: {},
methods: {
onRestore() {
console.log("track_onRestore.");
},
onRefreshPage() {
console.log("track_onRefreshPage.");
if (this._freshing) {
return;
}
console.log("track_onRefreshPage_1.");
this._freshing = true;
if (!this.triggered) {
this.triggered = true;
}
this.pageInfo.currPageIndex = 0;
this.requestDataList(() => {
this.triggered = false;
this._freshing = false;
});
},
onRequestMore() {
console.log("track_onRequestMore.");
if (this._freshing) {
return;
}
console.log("track_onRequestMore_1.");
this._freshing = true;
this.requestDataList(() => {
this._freshing = false;
});
},
async requestDataList(callback) {
console.log("track_requestDataList.");
let cachePageIndex = this.pageInfo.currPageIndex + 1;
// 利用 延迟执行 模拟 数据请求过程。
setTimeout(() => {
if (cachePageIndex - this.pageInfo.currPageIndex == 1) {
console.log("track_requestDataList_data_ok.");
// 模拟处理数据。
if (1 == cachePageIndex) {
this.dataList = [];
}
this.dataList = this.dataList.concat([{}, {}, {}, {}, {}, {}]);
this.pageInfo.currPageIndex = cachePageIndex;
} else {
console.log("track_requestDataList_data_discard.");
}
if (typeof callback == 'function') {
callback();
}
console.log("track_requestDataList_end.");
}, 6000);
console.log("track_requestDataList_1.");
},
}
};
</script>
<style>
.base_box {
padding-top: 168rpx;
background-color: #F7F7F7;
}
.scroll_box {
width: 750rpx;
height: 960rpx;
background-color: #EEEEEE;
}
.list_box {
width: 750rpx;
}
.list_item {
margin: 20rpx 20rpx 0rpx 20rpx;
width: 710rpx;
height: 300rpx;
background-color: #999999;
}
</style>
参考链接: https://blog.csdn.net/qq_40666120/article/details/108284680
网友评论