vantui下拉刷新和上拉加载应用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

在移动端开发中，经常会遇到列表数据，对于列表数据来说，上拉加载和下拉刷新更是必备的，可以通过window监听scroll实现。不过现在有好多移动端ui组件库，直接使用组件就可以实现，以vantui为例，简单说下

在vantui中，List 组件可以与 [PullRefresh]组件结合使用，实现下拉刷新的效果。而且list组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可

具体代码实现

 <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="已加载到底"
          @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">当前区域没有可服务门店</div>

list组件的一些参数设置:

      shopList:[],//商店列表
      isDownLoading:false,//是否处于加载中状态
      isUpLoading:false,//是否处于加载状态，加载过程中不触发`load`事件
      upFinished:false,//是否已加载完成，加载完成后不再触发`load`事件

方法实现:

一般移动端后端请求参数都会有一个页数的值，比如我这个项目，通过 this.getListParam.pageNo 页数来获取相应列表数据。当下拉时每10条会自动增加一页，当上拉刷新时就直接把页数赋值为1，渲染列表数据

 async getShopList(val){
      this.$Toast.loading({
            duration: 0,
            message: '加载中...'
        })
     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('已更新')
      this.isDownLoading = false
    },