Applet: Area scrolling, pull-down refresh, pull-up load more

One 、 brief introduction

development environment ： Applet 、uniapp

Realization function ： List page implementation , Area scrolling 、 The drop-down refresh 、 Pull up to load more , The effect is as shown in the picture ：

normal ：

The drop-down refresh ：

 

Pull on loading ：

  Two 、 Realization

2.1、 Code

<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"> Weng Meiling </span>
			<span class="time">2022-07-15</span>
		</view>
	</view>
	<view class="loading">
		<view class="tips" v-if="loadings === '0'"> This is my bottom line ~</view>
		<view class="tips" v-else-if="loadings === '1'"> Pull up to load more ...</view>
		<view class="imgs" v-else-if="loadings === '2'">
			<image src="load.png" mode=""></image>
			<text> Loading ...</text>
		</view>
	</view>
</scroll-view>

-------------------------------------------------
lower(){
	console.log(' Scroll to the bottom ')
	this.page ++
	this.getList()
},
refresher(){
	console.log(' The drop-down refresh ',this._freshing,this.triggered)
	if (this._freshing) return;
	this._freshing = true;
	this.triggered = true
	this.page = 1
	this.getList()
    //getList After the method is executed, restore the following two states 
	//this.triggered = false;
	//this._freshing = false;
},

2.2、 analysis ：

2.2.1、<scroll-view></scroll-view>, Define the area to scroll

2.2.2、:scroll-y, Allow vertical scrolling

2.2.3、@scrolltolower="lower", event ： Scroll to the bottom / Trigger on the right , You can call to load the data of the next page

2.2.4、:refresher-enabled="true", attribute ： Enable custom drop-down refresh

2.2.5、@refresherrefresh="refresher", event ： Custom pull down refresh triggered , You can call the interface again

2.2.6、:refresher-triggered="triggered", attribute ： Set the current pull-down refresh status ,true Indicates that the pull-down refresh has been triggered ,false Indicates that the pull-down refresh is not triggered

2.2.7、@refresherrestore="onRestore", event ： Custom pull down refresh reset

2.2.8、@refresherabort="onAbort", event ： Custom pull down refresh aborted

3、 ... and 、 Although it's very simple , But I think every knowledge point should be recorded . Welcome to communicate and correct , Pay attention to me , Learning together .

Four 、 Reference documents ：

scroll-view | Wechat open documents