根据开发实际情况,我推荐第2种、第3种解决办法。
{
"path": "pages/PMS/document/officialDocument",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false, //配置后,可以下拉刷新,上拉加载`
"onReachBottomDistance": 100
}
},
就已经成功开启下拉刷新,与触底加载了,当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。
onLoad() {
},
onReachBottom(){
//上拉到底时触发,onReachBottom函数跟生命周期同级
let allTotal = this.formData.page * this.formData.pageSize
if(allTotal < this.total){
this.page ++;//当前条数小于总条数 则增加请求页数
this.getData() //调用加载数据方法
}else{
console.log('已加载全部数据')
}
},
onPullDownRefresh(){
//下拉刷新触发,onPullDownRefresh函数跟生命周期同级
this.list = []
this.getData()//调用获取数据方法
setTimeout(() => {
//结束下拉刷新
uni.stopPullDownRefresh ();
}, 1000);
},
<uni-load-more :status="status"></uni-load-more>
<script>
export default {
data(){
status: 'more',
page:'1',
pageSize:'10'
},
onLoad() {
},
onReachBottom() {
let allTotal = this.page * this.pageSize;
if (allTotal < this.total) {
this.status = 'loading'; //加载中状态
this.page++;
this.getData()
} else {
this.status = 'noMore'; //加载完状态
}
},
}
</script>
<template>
<scroll-view
class="dialogue-box"
style="height: 86vh"
:scroll-y="true"
:refresher-threshold="10"
:scroll-top="scrollTop"
@scrolltolower="handelLower"
:refresher-enabled="isLoadingTop"
:refresher-triggered="isTriggeredTop"
@refresherrefresh="handleRefresher"
@refresherrestore="handelonRestore"
>
</scroll-view>
</template>
<script>
export default {
data() {
return {
tableList: [],
lazyLoad: true,
shipGuid: "",
scrollTop: "50px",
loadings: "more", //more/loading/noMore
isLoadingTop: true,
isTriggeredTop: true,
isShowBtm: false,
};
},
method:{
getTableList(info, load) {
//发起网络请求
getFiles(info).then((res) => {
if (res.data.code == 0) {
const resData = res.data.data;
if (load) {
this.tableList = this.tableList.concat(resData);
if (resData && resData.length == 0) {
// console.log("没有更多了");
uni.hideLoading();
this.loadings = "noMore";
} else {
uni.hideLoading();
this.loadings = "more";
}
return resData;
} else {
this.tableList = resData;
this.noNum = !this.tableList.length;
}
}
});
},
handelLower() {
console.log("滚动到底部>>>");
this.isShowBtm = true;
if (this.loadings == "loading") return;
if (!this.loadings == "noMore") return;
this.loadings = "loading";
this.pages.page += 1;
let info = {
...this.pages,
shipGuid: this.shipGuid,
};
this.getTableList(info, true);
},
handleRefresher() {
console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
this.isLoadingTop = true;
this.isTriggeredTop = true;
if (!this.isLoadingTop) return;
let info = {
...this.pages,
shipGuid: "",
};
this.$store.commit("setShipGuids", "");
this.getTableList(info);
this.isLoadingTop = false;
this.isTriggeredTop = false;
},
handelonRestore() {
console.log("handelonRestore>>>");
this.isLoadingTop = true;
},
},
</script>
这次使用uniapp+uView组件实现:
<template>
<view class="regionalregulation_contanier">
<!-- <TopNavibarVue :listData="listData" :currentTabIndex="currentTabIndex" @clickTabs="clickTabs"></TopNavibarVue> -->
<template v-for="item in listData">
<view class="regionalregulation_content" v-if="currentTabIndex == item.id" :key="item.id">
<!-- <u-sticky bgColor="#fff">
<view style="padding: 20rpx 20rpx 0rpx 20rpx;">
<FormItem :formItems="formItems" @searchData="searchData"></FormItem>
</view>
</u-sticky> -->
<view class="content_list" v-if="tableData.length">
<scroll-view :scroll-y="true" @scrolltolower="handelLower">
<view v-for="i in tableData" :key="i.pid">
<CardTopBTNVue :data="i" :detail="{ title: item.subName }"></CardTopBTNVue>
</view>
<u-loadmore :status="loadings" v-if="isShowBtm" />
</scroll-view>
</view>
<view class="content_list" v-else>
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无匹配信息">
</u-empty>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
data() {
return {
pages: {
pageNum: 1,
pageSize: 7,
},
tableData: [],
scrollTop: "50px",
loadings: "loadmore", //loadmore/loading/nomore
isShowBtm: false,
}
methods: {
async getTableList(params, id, _isLower) {
const {
data: res
} = await this.listData[id].apiPost(params)
if (res.code == 0) {
const resData = res.data
if (_isLower) {
this.tableData = [...this.tableData, ...resData]
} else {
this.tableData = resData
}
this.loadings = resData.length < params.pageSize ? "nomore" : "loadmore";
} else {
this.tableData = []
}
// this.isShowBtm = false;
setTimeout(function () {
uni.hideLoading();
}, 500);
},
handelLower() {
this.isShowBtm = true;
if (this.loadings == "loading") return;
if (this.loadings == "nomore") return;
this.loadings = "loading";
this.pages.pageNum += 1;
this.getTableList(this.pages, this.currentTabIndex, true);
},
}
</script>
<style lang="scss" scoped>
.regionalregulation_contanier {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.regionalregulation_content {
min-height: 0;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
.content_list {
min-height: 0;
flex: 1;
overflow-y: auto;
padding: 0rpx 20rpx;
margin-top: 10rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
box-sizing: border-box;
uni-scroll-view {
height: 100%;
}
}
}
}
</style>
CSS布局中最小高度的妙用——最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸