You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.7 KiB
84 lines
1.7 KiB
4 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<page-head :title="title"></page-head>
|
||
|
|
<view class="uni-padding-wrap uni-common-mt">
|
||
|
|
<view style="font-size: 12px; color: #666;">注：PC 不支持下拉刷新</view>
|
||
|
|
<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
|
||
|
|
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '下拉刷新 + 加载更多',
|
||
|
|
data: [],
|
||
|
|
loadMoreText: "加载中...",
|
||
|
|
showLoadMore: false,
|
||
|
|
max: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
onUnload() {
|
||
|
|
this.max = 0,
|
||
|
|
this.data = [],
|
||
|
|
this.loadMoreText = "加载更多",
|
||
|
|
this.showLoadMore = false;
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
console.log("onReachBottom");
|
||
|
|
if (this.max > 40) {
|
||
|
|
this.loadMoreText = "没有更多数据了!"
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.showLoadMore = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setListData();
|
||
|
|
}, 300);
|
||
|
|
},
|
||
|
|
onPullDownRefresh() {
|
||
|
|
console.log('onPullDownRefresh');
|
||
|
|
this.initData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initData(){
|
||
|
|
setTimeout(() => {
|
||
|
|
this.max = 0;
|
||
|
|
this.data = [];
|
||
|
|
let data = [];
|
||
|
|
this.max += 20;
|
||
|
|
for (var i = this.max - 19; i < this.max + 1; i++) {
|
||
|
|
data.push(i)
|
||
|
|
}
|
||
|
|
this.data = this.data.concat(data);
|
||
|
|
uni.stopPullDownRefresh();
|
||
|
|
}, 300);
|
||
|
|
},
|
||
|
|
setListData() {
|
||
|
|
let data = [];
|
||
|
|
this.max += 10;
|
||
|
|
for (var i = this.max - 9; i < this.max + 1; i++) {
|
||
|
|
data.push(i)
|
||
|
|
}
|
||
|
|
this.data = this.data.concat(data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.text {
|
||
|
|
margin: 16rpx 0;
|
||
|
|
width:100%;
|
||
|
|
background-color: #fff;
|
||
|
|
height: 120rpx;
|
||
|
|
line-height: 120rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #555;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
}
|
||
|
|
</style>
|