vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

题目描述

在使用Vue VantUI的Tab组件进行页面切换时，若其中一个Tab对应的List组件需要异步加载数据，但在切换时发现List并没有触发load事件，导致不能正常加载数据，此问题该如何解决？

解决步骤

Step 1：监听tab栏切换事件

在vue的生命周期中，可以通过在mounted()函数中使用$nextTick()延迟显示数据的Load事件处理程序，以便在dom元素完成渲染后再执行代码。

但在这种情况下，需要手动获取当前Tab索引并设置当前List对应的数据加载状态，这样即可使当前处于激活状态的List组件正确触发load事件。

示例代码：

<template>
 <van-tabs v-model="activeTab" @change="handleTabChange">
  <van-tab title="Tab 1">
   <van-list v-if="activeTab === 0" :loading="tabActive[0]" :finished="tabFinished[0]" finished-text="没有更多了" @load="handleLoad(0)">
    <!-- List组件的内容 -->
   </van-list>
  </van-tab>
  <van-tab title="Tab 2">
    <van-list v-if="activeTab === 1" :loading="tabActive[1]" :finished="tabFinished[1]" finished-text="没有更多了" @load="handleLoad(1)">
        <!-- List组件的内容 -->
    </van-list>
  </van-tab>
 </van-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前Tab索引
      tabActive: [false, false], // 表示两个Tab的加载状态
      tabFinished: [false, false] // 两个Tab的不可加载状态
    }
  },
  mounted() {
    this.handleTabChange(this.activeTab) // 初始化时调用切换Tab栏方法
  },
  methods: {
    handleTabChange(index) {
      // 切换Tab栏时手动切换加载状态
      this.tabActive.splice(0, this.tabActive.length, false)
      this.tabFinished.splice(0, this.tabFinished.length, false)
      this.tabActive[index] = true
      this.tabFinished[index] = false
      this.$nextTick(() => {
        // 延迟至下一次dom更新完成后触发load事件处理程序
        this.handleLoad(index)
      })
    },
    handleLoad(tabIndex) {
      // 处理List组件的load事件
      // ajax请求数据
      // 请求成功后启用tabFinished标记
      this.tabFinished.splice(tabIndex, 1, true)
    }
  }
}
</script>

Step 2：修复异步加载过程中的list组件懒加载问题

如果一个异步请求遍历了多次才能完成数据的加载操作，此时可能因为list组件的懒加载性质，在页面加载过程中不触发load事件。为了解决这个问题，需要重新触发list组件的加载操作。

示例代码：

<template>
 <van-tabs v-model="activeTab" @change="handleTabChange">
  <van-tab title="Tab 1">
   <van-list v-if="activeTab === 0" :loading="loading" :finished="finished" finished-text="没有更多了" @load="handleLoad">
    <!-- List组件的内容 -->
   </van-list>
  </van-tab>
  <van-tab title="Tab 2">
    <van-list v-if="activeTab === 1" :loading="loading" :finished="finished" finished-text="没有更多了" @load="handleLoad">
        <!-- List组件的内容 -->
    </van-list>
  </van-tab>
 </van-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前Tab索引
      loading: false, // 加载状态
      finished: false // 不可加载状态
    }
  },
  methods: {
    handleTabChange(index) {
      // 切换Tabs时重置数据
      this.loading = false
      this.finished = false
    },
    handleLoad() {
      this.loading = true
      // 使用setTimeout模拟异步请求(假设每次请求只能返回一个item)
      setTimeout(() => {
        if (this.$refs.list.items.length >= 20) {
          this.finished = true
        } else {
          // 动态向list组件中插入数据
          this.$refs.list.items.push({})
          this.loading = false
          // 触发list的load事件
          this.$refs.list.$emit('load')
        }
      }, 500)
    }
  }
}
</script>

以上两个步骤都是为了确保list组件能够正确地通过load事件响应异步加载操作。

阅读剩余 61%