van-list的使用

html 复制代码
<van-list
          v-if="joblist && joblist.length > 0"
          v-model:loading="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
        >
js 复制代码
// 加载
const loading = ref(false);
// 全部加载完毕
const finished = ref(false);

// 加载更多触底事件
const onLoad = async () => {
  if (joblist.value.length < total.value) {
    searchform.value.pageNum++;
    await getjoblist();
    loading.value = false;
  } else {
    loading.value = false;
    finished.value = true;
  }
};

const getjoblist = async () => {
  const res = await queryJoblist(searchform.value);
  if (res.code === 200) {
    total.value = res.total;
    //使用concat将新数据和原来的列表拼接在一起,不能直接赋值
    joblist.value = joblist.value.concat(res.rows);
  }
};

注意!!!
要使用concat将新数据和原来的列表拼接在一起,不能直接赋值,否则每次请求后的页面高度都是在页面底部,导致一直触发onLoad方法请求接口多次

相关推荐
Anlici41 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫43 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼1 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js