uniapp实现区域滚动、下拉刷新、上滑滚动加载更多

news/2024/9/14 17:37:41/ 标签: uni-app

背景：

在uniapp框架中，有两种实现办法。第1种，是首先在page.json中配置页面，然后使用页面的生命周期函数；第2种，使用<scroll-view>组件，然后配置组件的相关参数，包括但不限于：滚动区域、触底加载。。。这里注意要给scroll-view设置一个height不然滚动不了

效果展示：

根据开发实际情况，我推荐第2种、第3种解决办法。

一、单个页面的配置

官方链接：点击跳转官网

第一步，是在pages.json配置开启下拉刷新

{"path": "pages/PMS/document/officialDocument","style": {"navigationStyle": "custom","enablePullDownRefresh": false, //配置后，可以下拉刷新，上拉加载`"onReachBottomDistance": 100}},

就已经成功开启下拉刷新，与触底加载了，当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。

onReachBottom() （上拉时到底部多少距离触发的事件）官方语言：页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

uni.startPullDownRefresh() （直接调用一次下拉事件）官方语言：开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

onPullDownRefresh() （下拉后触发的事件）官方语言：处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

上滑触底加载：

核心代码：

	onLoad() {},onReachBottom(){//上拉到底时触发，onReachBottom函数跟生命周期同级let  allTotal = this.formData.page * this.formData.pageSizeif(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>

备注说明：

因为通过验证console.log()，按照设计图来写，滚动区域不一样。不会出发onReachBottom()。推荐第2种解决方式。。。

二、scroll-view组件的滚动区域、触底加载

官网链接：点击跳转官网

@refresherpulling //下拉刷新控件被下拉

@refresherrefresh //下拉刷新被触发

@refresherrestore //下拉刷新被复位

@scrolltoupper //滚动到顶部/左边，会触发 scrolltoupper 事件

@scrolltolower //滚动到底部/右边，会触发 scrolltolower 事件

核心代码：

<template>
<scroll-viewclass="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/noMoreisLoadingTop: 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>

备注：

scroll-view组件要设置一个height。一般是设置为(某某vh)

三、第2种的优化

背景：

第2种已经能够实现下拉刷新和触底加载。但是我们只想要触底加载，并且想让scroll-view组件的高度是自适应的，不再设置滚动区域的高度scrollHeight

注意：关于高度，通过设置css样式解决，通过给最外层的盒子，设置min-height:0;

这次使用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/nomoreisShowBtm: false,
}
methods: {async getTableList(params, id, _isLower) {const {data: res} = await this.listData[id].apiPost(params)if (res.code == 0) {const resData = res.dataif (_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>