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

<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()
})
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值