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方法请求接口多次

相关推荐
蜗牛快跑1236 分钟前
通过尤大“围绕Vite的前端统一框架”分享,看未来前端发展趋势
前端
skywalk81639 分钟前
Mac下安装Zed以及Zed对MCP(模型上下文协议)的支持
服务器·前端·macos
陈龙龙的陈龙龙12 分钟前
macOS 安装 Homebrew、nvm 及安装切换 node 版本
前端·macos·bash
asphyxia16 分钟前
老龄化项目问题解决
前端
SaebaRyo17 分钟前
作为一个前端er如何了解LLM(大语言模型)
前端·llm
悬炫17 分钟前
深入解析浏览器渲染原理与性能优化策略
前端·javascript
鸡血园地17 分钟前
前端性能优化
前端
铠文18 分钟前
垃圾回收机制核心知识点
javascript
谦谦橘子21 分钟前
rxjs原理解析
前端·javascript·函数式编程
竺梓君22 分钟前
移动端开发常见问题及解决方案
前端·javascript