uniapp使用scroll-view组件实现下拉刷新跟上拉加载

uniapp实现下拉刷新跟上拉加载

一、上拉加载分页：

1. 使用scroll-view的触底事件触发 @scrolltolower=“scrolltolower”
2. 定义是加载中…跟没有更多数据的标记
3. 在scrolltolower中 跟请求数据的方法中改变 步骤2中的标记

template

 <scroll-view
      :style="{ height: scroll_height + 'px' }"
      scroll-y
      class="scrollv"
      @scrolltolower="scrolltolower"
      @scroll="watchScroll"
    >
  <view>
     <view v-if="loadingFlag == 1">数据加载中...view>
     <view v-if="loadingFlag == 2">没有更多的数据...view>
  view>

script

/**加载中 跟没有跟多数据  0默认 1加载中 2没有更多数据 */
const loadingFlag = ref(0);
/**上拉加载 */
const scrolltolower = () => {
  if (loadingFlag.value == 2) {
    return;
  }
  loadingFlag.value = 1;
  pageNo.value++;
  dataObj.pageNo++;
  loadData(dataObj);
};
/**请求数据的方法*/
const loadData(){
 await inviteMementOrder(data).then((res) => {
   uni.hideLoading();
   if (res.status == 500) {
       showEmpty.value = true;
       return;
     }
     if (res.records.length > 0) {
       dataList.push(...res.records);
       total.value = res.total;
     } else {
       loadingFlag.value = 2;
       isScrolled.value = false;
       showEmpty.value = true;
     }
   });
}

二、下拉刷新

1. 开启scroll-view的下拉刷新功能 （可以自定义刷新的位置）
2. 定义下拉刷新标识、下拉刷新的方法

template

 <scroll-view
      scroll-y
      :style="{ height: pageHeight }"
      refresher-enabled="true"
      :refresher-triggered="trigger"
      @refresherrefresh="refresherrefresh"
      show-scrollbar="false"
    >

script

/**自定义下拉刷新 */
const trigger = ref(false);
/**下拉刷新 */
const refresherrefresh = () => {
  trigger.value = true;
  emit("loadAllData");
  //此处使用了定时器模拟 网络请求，应该在网络请求成功后 trigger.value = false;
  setTimeout(() => {
    trigger.value = false;
  }, 1000);
};

以上就是uniapp 使用scroll-view上拉加载跟下拉刷新功能的实现方法。不足之处欢迎指出。