Uso de escena de paginación de componente de lista de Vant y entrada de cuadro de búsqueda - datos de solicitud - procesamiento anti-vibración

Requisitos: use el componente Vant List para implementar la carga de paginación de la página y devolver el backend de datos de paginación

plantilla plantilla:

<van-list
  v-if="!noData"
  v-model:loading="loadingpage"
  :finished="finishedpage"
  finished-text="没有更多数据了"
  @load="onLoad"
>
   <div
       class="recommendItem"
       v-for="(item, index) in collectPositioninfoList"
       :key="index"
       @click="recommendItemClick(item.id)"
    >
  </div>
</van-list>

método de escritura de la página js

// 定义接口参数
const current = ref(1)
const size = 10
const total = ref(0)

// 定义分页相关数据
const loadingpage = ref(false)
const finishedpage = ref(false)

// 控制占位图显示
const noData = ref(false)

// 定义接口数据数组
const collectPositioninfoList = ref([])

//封装接口请求数据方法
const getList = async (obj) => {
  const {
    data,
    data: { records } //对数据 data 和列表数据 records 进行结构
  } = await collectPositioninfoApi(obj) //调用后端接口
  if (records.length == 0) {
    // 判断获取数据条数若等于0
    collectPositioninfoList.value = [] // 清空数组
    finishedpage.value = true // 停止加载
    noData.value = true // 展示占位图
  } else {
    noData.value = false //不展示占位图
  }
  // 若数据条数不等于0
  total.value = data.total // 给数据总条数赋值

  collectPositioninfoList.value.push(...records) // 将数据放入list中

  loadingpage.value = false // 加载状态结束

  // 如果list长度大于等于总数据条数,数据全部加载完成
  if (collectPositioninfoList.value.length >= total.value) {
    finishedpage.value = true // 结束加载状态
  }
}


// onLoad 方法页面首次加载会执行一次，组件滚动到底部触发load事件并将loading 设置成 true
const onLoad = () => {
  // 若加载条到了底部
  let timer = setTimeout(() => {
    // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
    let obj = {
      current: current.value,
      size: size,
      id: route.query.serial_no || '',
      category: route.query.category || '', //	岗位类别
      degree: contentEduItem.value || '', //学历
      position: searchValueKeyword.value || '' //岗位名称(模糊查询)
    }
    getList(obj) // 调用上面方法,请求数据
    current.value++ // 分页数加一
    finishedpage.value && clearTimeout(timer) //清除计时器
  }, 100)
}

Cabe señalar que al usar la barra de pestañas para cambiar y cargar los datos paginados, además de borrar los datos de la matriz para recargar datos, también se debe volver a calcular el control para cargar y finalizar.

Encontró un error y lo registró. Cuando la pestaña termine de cambiar datos, deslice hacia abajo para cargar los datos----hará que la barra de desplazamiento se mueva hacia arriba. Aquí, reasigne loading.value = true antes de cargar los datos y será resuelto .

Requisitos, realizar el procesamiento anti-vibración del contenido de entrada del cuadro de búsqueda (reducir el número de solicitudes)

Al buscar una entrada, se considera que el usuario se da cuenta después de que se completa la entrada即时的自动搜索
y para evitar 过度自动搜索el consumo de rendimiento

Idea: usar watch + v-model

v-model implementa la actualización síncrona de la entrada de datos (piense en el enlace de datos)

el reloj supervisa los cambios de entrada y utiliza la función antivibración para implementar operaciones posteriores

plantilla plantilla: componente de búsqueda

<van-search
  clearable
  v-model="searchValueKeyword"
  placeholder="搜索岗位名称"
  shape="round"
  show-action
  autocomplete="off"
>
  <template #action>
    <div @click="onZhiWeiBtn">职位</div>
  </template>
</van-search>

método de escritura js anti-vibración: se activa varias veces dentro de un cierto período de tiempo y solo se ejecuta la última vez

// 定义搜索框数据
const searchValueKeyword = ref('')

// 因为 防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收
const searchInput = debounce(1000)

// 使用watch 监听 搜索框数据 变化
watch(searchValueKeyword, () => {
  searchInput() //调用防抖的回调函数
})

// 防抖函数
function debounce(delay) {
  let timer //声明一个存储定时器的变量
  return function () {
    if (timer) clearTimeout(timer) // 再次触发时之前的定时器没有结束就清空定时器
    timer = setTimeout(() => {
      // 暂时理解不了（this，arguments）指向改变的问题
      // getList.call(this, arguments)

      current.value = 1
      collectPositioninfoList.value = []
      let obj = {
        current: 1,
        size: size,
        id: route.query.serial_no || '',
        category: route.query.category || '', //	岗位类别
        degree: contentEduItem.value, //学历
        position: searchValueKeyword.value //岗位名称(模糊查询)
      }
      getList(obj) //每隔一秒发送一次请求
      // 不输入延迟 则默认 1000 ms
    }, delay || 1000)
  }
}