vant ui中 pullRefresh+list与tabs相结合使用导致一直触发load的一种比较简单的解决办法

先说办法(比较直接比较笨的): 不把van-pull-refresh以及van-list放在van-tab标签当中

其原因可能是在tab里定位 触底判断有问题
网上搜了好多,很多说是overflow的问题,但我改了没什么用 就直接不放在tab里 只用他判断切换数据

示例代码

<van-tabs v-model="active" color="#228BFF" animated sticky swipeable @change="tabChange">
  <van-tab :title="item.title" :name="item.name" v-for='(item,index) in TabConfiguration' :key='index'>van-tab>
van-tabs>
<div>
  <van-pull-refresh success-text="刷新成功" v-model="refreshing" @refresh="onRefresh">
    <van-list v-model="IsRequest" :finished="finished" :immediate-check="false" @load="listLoad" :finished-text="finishedText">
     	<template v-for="(trialItem,index) in TabConfiguration[nowClickTab].listData">
         <div style="height: 100px">{{trialItem}}div> 
    	template>
    van-list>
  van-pull-refresh>
div>

export default {
  props: {},
  name: "test",
  //变量书写对象
  data() {
    return {
      finishedText:'暂无数据',
      // 下拉状态
      refreshing: false,
      // tab配置
      TabConfiguration: [
        {
          name: '1',
          title: '标题1',
          listData: [],
        },
        {
          name: '2',
          title: '标题2',
          listData: [],
        },
        {
          name: '3',
          title: '标题3',
          listData: [],
        },
        {
          name: '4',
          title: '标题4',
          listData: [],
        },
      ],
      // 当前展示那个Tab页面
      active: 0,
      // 请求数据显示字段
      loadingText: '加载中...',
      // 是否请求中
      IsRequest: false,
      filterId: "",
      // 分页配置
      pagingConfig: {
        // 每页大小
        pageSize: 20,
        // 页码
        pageNumber: 1,
        // 总条数
        total: 0,
      },
      // 是否所有的数据都已经加载完毕
      finished: false,
      nowClickTab: 0,
    };
  },
  mounted() {
    this.Init();
  },
  //书写方法对象
  methods: {
    // 下拉刷新
    onRefresh() {
      this.pagingConfig.pageNumber = 1;
      this.finished = false;
      this.tabChange(this.filterId);
      this.refreshing = false
    },
    /**
     * @desc 初始化函数
     */
    async Init() {
      this.tabChange();
    },
    // 改变标签
    newTabChange(filter){
      this.TabConfiguration.forEach((item ,index) => {
        if(item.name == filter){
          this.nowClickTab = index
        }
      })
      this.tabChange(filter)
    },
    async tabChange(filter = 1, autoObj = {}) {
      if ((this.filterId != filter)) {
        // 重置页码值
        this.pagingConfig.pageNumber = 1;
        // 重置总数俱的开关
        this.finished = false;
      }
      this.filterId = filter;
      // 把状态更新成请求中
      this.IsRequest = true;
      // 首先获取要设置数据的对象
      let SetDataObj = this.TabConfiguration.find((item) => { return item.name == this.filterId });
      // 根据页码值来判断当前是否需要重置数据集合
      if (this.pagingConfig.pageNumber == 1) {
        // 处理完数据存放的对象;
        SetDataObj.listData = [];
      }
      // 根据参数获取数据列表
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          SetDataObj.listData.push(i);
        }
        // 加载状态结束
        this.IsRequest = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
      
    },
    // 上拉刷新触发函数
    async listLoad() {
      // 如果当前不存在 tab的标识就直接返回出去
      if (!this.filterId) return;
      // return;
      // 页码值＋1
      this.pagingConfig.pageNumber++;
      // 开始请求数据
      await this.tabChange(this.filterId);

    }
  },
};