vue2用vant的van-pull-refresh实现上拉加载、下拉刷新

qq_21138747

于 2024-05-24 11:30:55 发布

阅读量306

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_21138747/article/details/139170335

版权

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :distance="150">
          <Empty
            v-if="!list.length" />
          <Table
            v-else
            :data="list"
            :column="column"
            :isShowStatus="false" />
        </van-list>
      </van-pull-refresh>
      
      const pageNum = ref(0)
	const pageSize = ref(15)
	const loading = ref(false)
	const finished = ref(false)
	const refreshing = ref(false)
    const column= ref([])
		column.value = [
		  '11',
		  '22',
		]
   const getPageList = (_pageNum = 0) => {
	  if (_pageNum) {
	    pageNum.value = _pageNum
	  }
	  getData({
	    sss:'all',
	    pageNum: _pageNum || pageNum.value,
	    pageSize: pageSize.value
	  })
    .then(data => {
      if (data.list.length == 0) {
        // 本次没有数据
        if (pageNum.value > 1) {
          // 不是第一页，上拉加载
          finished.value = true // 数据全部加载完毕
        } else {
          //第一页，下拉刷新
          list.value = []
          showFailToast('暂无数据')
          refreshing.value = false
        }
      } else {
        if (pageNum.value > 1) {
          let _preData = list.value
          if (data.list.length) {
            let _data = data.list
            list.value = [..._preData, ..._data]
          } else {
            refreshing.value = false
          }
        } else {
          list.value = data.list
          refreshing.value = false
        }
      }
      // 更新 loading 和 finished 的状态值
      loading.value = false
      // 如果数据全部加载完毕，则将 finished 置为 true
      if (finished.value) {
         showToast('已经没有更多数据了')
      }
    })
    .catch(err => {
      showFailToast(err.msg || '请求失败')
    })
}

	const onRefresh = () => {
		  // 下拉刷新
		  finished.value = false // 每次下拉刷新，要将finished置为false
		  getPageList(1)
		  console.log('下拉刷新222', finished.value, loading.value)
	}

const onLoad = useDebounceFn(() => {
  loading.value = true
  pageNum.value++
  console.log('上拉加载222', finished.value, loading.value)
  getPageList()
}, 200)

onMounted(() => {
  // getInitData()
})