一、简介
开发环境：小程序、uniapp
实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：
正常：
下拉刷新：
上拉加载：
二、实现
2.1、代码
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" refresher-enabled="true" @refresherrefresh="refresher" :refresher-triggered="triggered" @refresherrestore="onRestore" @refresherabort="onAbort" v-if = "patList.length > 0"> <view class="itemList" @click="toDetail(item.caseId,item.identifier)" v-for="(item,index) in patList" :key="index"> <view class="title"> <span class="name">翁美玲</span> <span class="time">2022-07-15</span> </view> </view> <view class="loading"> <view class="tips" v-if="loadings === '0'">这是我的底线了~</view> <view class="tips" v-else-if="loadings === '1'">上拉加载更多...</view> <view class="imgs" v-else-if="loadings === '2'"> <image src="load.png" mode=""></image> <text>加载中...</text> </view> </view> </scroll-view> ------------------------------------------------- lower(){ console.log('滚动到底部') this.page ++ this.getList() }, refresher(){ console.log('下拉刷新',this._freshing,this.triggered) if (this._freshing) return; this._freshing = true; this.triggered = true this.page = 1 this.getList() //getList方法执行结束后恢复下边两个状态 //this.triggered = false; //this._freshing = false; },
2.2、 解析
2.2.1、<scroll-view></scroll-view>，定义需要滚动的区域
2.2.2、:scroll-y，允许纵向滚动
2.2.3、@scrolltolower="lower"，事件：滚动到底部/右边时触发，可以调用加载下一页数据了
2.2.4、:refresher-enabled="true"，属性：开启自定义下拉刷新
2.2.5、@refresherrefresh="refresher"，事件：自定义下拉刷新被触发，可以重新调用接口了
2.2.6、:refresher-triggered="triggered"，属性：设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
2.2.7、@refresherrestore="onRestore"，事件：自定义下拉刷新被复位
2.2.8、@refresherabort="onAbort"，事件：自定义下拉刷新被中止
三、过程记录
3.1、需要注意的是scroll-view必须设置高度，不设置的话没效果，但不要设置100%，除非父元素写了高度。
