1、包含在scroll-view里的滚动分页
<template>
<view>
<scroll-view scroll-y id="scrollList" :style="updateHeight()" @scrolltolower="scrolltolower">
<!-- 列表,这里封装成子组件了,要换成自己的列表 -->
<baseInfo :list="list"/>
<!-- 状态:加载更多、没有更多了... -->
<u-loadmore icon :status="status"/>
</scroll-view>
</view>
</template>
<script>
import { shop_info } from '@/api/index.js';
export default {
data() {
return {
listTop: 0,
status: 'loadmore', // 状态-正在加载中
currentPage: 1,// 当前页
size: 10, // 每页数量
pageCount: '', // 总页数
list: [],
}
},
onLoad() {
this.getStoreList()
},
methods: {
// 滚动区域
updateHeight() {
setTimeout(() => {
let query = uni.createSelectorQuery().in(this);
//需要给黄色区域设置一个id标识,在这里是scrollList
query.select('#scrollList').boundingClientRect(data => {
this.listTop = data.top//距离顶部的高度
}).exec();
},100)
return { height: `calc(100vh - ${this.listTop}px - 32rpx)` };
},
// 获取列表
async getStoreList() {
let agentShop = {
page: this.currentPage,
size: this.size,
}
await shop_info(agentShop).then(res => {
console.log(res)
this.pageCount = res.pageCount
this.list.push(...res.shop)
// res.page -- 后端返回的当前页,
// res.pageCount -- 后端返回的总页数
if(this.list.length == 0 || res.page==res.pageCount) {
this.status = 'nomore';
}
})
},
// 滚动到底部
scrolltolower(e) {
if(this.currentPage < this.pageCount){
this.currentPage++
this.getStoreList()
}else {
this.status = 'nomore';
}
},
}
}
</script>
2、页面滚动分页(下拉刷新 onReachBottom)
注意:page 的 overflow 必须为 visible,否则触发不了 onReachBottom
<template>
<view >
<!-- 列表 -->
<view class="card_item" v-for="(item,index) in list" :key="index">
<view>{{item.offNetwork}}(失联)</view>
<view>{{item.onNetwork}}(重联)</view>
<view>{{item.disappearDuration}}(失联时长)</view>
</view>
<!-- 正在加载中 -->
<u-loadmore icon :status="status"/>
</view>
</template>
<script>
import { net_list } from '@/api/index.js';
export default {
data() {
return {
list: [],
status: 'loading',
currentPage: 1,// 当前页
size: 10, // 每页数量
pageCount: '', // 总页数
}
},
onLoad() {
this.get_list()
},
//下拉刷新
onReachBottom() {
if(this.currentPage < this.pageCount){
this.currentPage++
this.get_list()
}else {
this.status = 'nomore';
}
},
methods: {
async get_list() {
let params = {
page: this.currentPage,
size: this.size,
}
await net_list(this.deviceId, params).then(res => {
this.pageCount = res.pageCount
this.list.push(...res.listData)
if(this.list.length == 0 || res.page==res.pageCount) {
this.status = 'nomore';
}
})
}
}
}
</script>
<style lang="scss" scoped>
page {
overflow: visible;
}
.card_item {
background: #c7c7c7;
margin-top: 28rpx;
}
.card_item:first-child {
margin-top: 0;
}
</style>