84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<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>
|