Vant リスト リスト コンポーネント ページング シーンの使用と検索ボックスの入力 - リクエスト データ - 防振処理

要件: vant List コンポーネントを使用してページのページング読み込みを実装し、ページング データ バックエンドを返します。

テンプレートテンプレート:

<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>

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)
}

タブバーを使用してページングされたデータを切り替えてロードする場合、配列データをクリアしてデータを再ロードすることに加えて、ロードおよび終了の制御も再計算する必要があることに注意してください。

バグが発生したので記録しました。タブがデータの切り替えを完了したら、下にスライドしてデータをロードします。スクロール バーが上部に移動します。ここで、データをロードする前に、 loading.value = trueを再割り当てすると、解決されます。 

---

要件、検索ボックス入力内容の手ぶれ補正処理を実現（リクエスト数の削減）

• 入力を検索する場合、入力が完了した後にユーザーが認識されたと判断します即时的自动搜索
• 过度自动搜索パフォーマンスの消耗を防ぐため

アイデア:watch  +  を使用する v-model

• v-model はデータ入力の同期更新を実装します (データ バインディングについて考えてください)
• watch は入力の変化を監視し、手ぶれ補正機能を使用して後続の操作を実行します。

テンプレート テンプレート:検索コンポーネント

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

js手ぶれ補正の書き方：一定時間内に複数回トリガーし、最後にのみ実行する

// 定义搜索框数据
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)
  }
}