背景:
在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>
CSS布局中最小高度的妙用——最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸