vue3 | 组合式api | 原生上拉加载新下拉刷新

vue3原生js实现上拉加载新下拉刷新

原理

相关属性:

• scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值
• clientHeight:它是一个定值，表示屏幕可视区域的高度；
• scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)

效果图

demo

<div ref="card" @scroll="doScroll"></div>

const card = ref()
const top = ref(false)
const bottom = ref(false)
const count1 = ref(1)
const isEnd = ref(false)

const doScroll = async (event) => {
  const scrollHeight = event.target.scrollHeight
  const scrollTop = event.target.scrollTop
  const clientHeight = event.target.clientHeight

  // 触底
  if (scrollTop + clientHeight >= scrollHeight) {
    bottom.value = true
    console.log('到底')
    count1.value++

    if (isEnd.value == true) {
      Toast_Info('All products are here ~')
      return (bottom.value = false)
    } else {
      const data2 = {
        size: 10,
        page: count1.value,
        barCode: '',
        name: ''
      }
      // get更多商品列表信息
      const resp_getGoodsList = await getGoodsList(data2)
      console.log('get商品列表信息', resp_getGoodsList)

      // 判断没有新数据了
      if (productList.length == resp_getGoodsList.data.total) {
        Toast_Info('All products are here ~')
        isEnd.value = true
      }

      // 控制加载动画出现
      setTimeout(async () => {
        bottom.value = false
        if (resp_getGoodsList.errCode == 1000) {
          resp_getGoodsList.data.list.forEach((item) => {
            productList.push(item)
          })
          count_product.value = productList.length
        } else {
        }
      }, 1500)
    }
  } else {
    bottom.value = false
  }

  // 到顶
  if (scrollTop <= 0) {
    top.value = true
    isEnd.value = false

    const data3 = {
      size: 10,
      page: 1,
      barCode: '',
      name: ''
    }
    // get更多商品列表信息
    const resp_getGoodsList = await getGoodsList(data3)
    console.log('get商品列表信息', resp_getGoodsList)

    setTimeout(async () => {
      top.value = false
      if (resp_getGoodsList.errCode == 1000) {
        productList.length = 0
        Object.assign(productList, resp_getGoodsList.data.list)
        count_product.value = productList.length
      } else {
      }
    }, 1000)
  } else {
    top.value = false
  }
}