Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

In mobile terminal development, list data is often encountered. For list data, pull-up loading and pull-down refreshing are essential, which can be realized by window listening scroll. However, there are many libraries of mobile UI components that can be implemented directly using components. Vantui is an example

In VANTUi, the List component can be used in conjunction with the [PullRefresh] component to achieve a drop-down refresh effect. In addition, the List component controls the loading state through loading and FINISHED variables. When the component rolls to the bottom, the load event is triggered and the loading is set to true. In this case, you can initiate asynchronous operations and update data. After data is updated, set loading to False. If all data is loaded, set finished to True

Concrete code implementation

<van-pull-refresh class="box" v-if="shopList&&shopList.length>0" v-model="isDownLoading" @refresh="onDownRefresh" > <van-list V-model ="isUpLoading" :finished="upFinished" finished-text=" loaded to the end "@load="getShopList" > <div class="list" v-if="shopList&&shopList.length>0"> <div class="list-item" v-for="(store, index) in shopList" :key="index"> <store-item :store="store"></store-item> </div> </div> </van-list> </van-pull-refresh> <div v-else class="no-text"> No available stores in the current region </div>Copy the code

Some parameter Settings for the list component:

ShopList :[],// store list isDownLoading:false,// Whether uploading is enabled :false,// Whether uploading is enabled, UpFinished :false,// Indicates whether the load is complete. After the load is complete, the load event is not triggeredCopy the code

Method implementation:

Usually the mobile backend request parameter will have a value of page number, such as my project, this. Getlistparam. pageNo page number to get the corresponding list data. Every 10 pages are automatically added to the drop-down, and the page number is directly assigned to 1 when the drop-down is refreshed, rendering the list data

Async getShopList(val){this.$toast. loading({duration: 0, message: 'Loading... ' }) const res = await getShopData(this.getListParam); this.$Toast.clear() if (! res.data.shopSiteVO) { this.upFinished = true return false } if (val === 'refresh') { this.shopList = res.data.shopSiteVO }else { this.shopList = this.getListParam.pageNo === 1? res.data.shopSiteVO:[...this.shopList, ...res.data.shopSiteVO] this.getListParam.pageNo++ } if (res.data.shopSiteVO.length < this.getListParam.pageSize) { this.upFinished = true }else{ this.upFinished = false this.isUpLoading = false } }, Async onDownRefresh () {this.getListparam.pageno = 1 this.shoplist = [] await this.getShoplist ('refresh') This.$toast. success(' downloading ') this. IsDownLoading = false},Copy the code