列表页到底部加载更多列表项,并有返回顶部按钮。
list.vue
<template>
<view class="content">
<view class="card" v-for="(item, index) in dataList" :key="item.orderId">
<h1>我是{{index}}</h1>
</view>
<!-- 返回顶部 -->
<u-back-top :scroll-top="scrollTop"></u-back-top>
<!-- 加载更多 -->
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'nomore',
page: 1,
scrollTop: 0,
dataList: []
}
},
onLoad() {
this.myOrders(1);
},
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'nomore';
}, 1000)
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
methods: {
// 获取订单列表
async myOrders(page) {
if (page > 3) return;
for (let i = page * 10; i < page * 10 + 10; i++) {
this.dataList.push(i);
}
},
// 下拉加载更多
async addRandomData() {
this.page += 1;
this.myOrders(this.page)
}
}
}
</script>
<style scoped lang="scss">
.content {
padding: 10px;
.card {
height: 200px;
border: 1px solid #000;
margin-top: 10px;
text-align: center;
ling-height: 200px;
}
}
</style>
网友评论