web:InfiniteScroll 无限滚动

InfiniteScroll 无限滚动

分页加载

复制代码
<div class="data-box" v-infinite-scroll="loadMore">
<li v-for='i in dataList'></li>
</div>

form: {
        current: 1,
        size: 10,
        }

loadMore(){
      console.log(this.dataList.length, this.total ,8888)
      if(this.dataList.length >= this.total){
        return
      }
      this.form.current = this.form.current + 1
      this.getDataList()
    },
     getDataList() {
      getList(this.form).then(res => {
        this.dataList = this.dataList.concat(res.result.records)
        console.log(this.dataList,66666)
        this.total = res.result.total
      })
    },
相关推荐
二两锅巴5 分钟前
📺 无需Electron!前端实现多显示器浏览器窗口精准控制与通信
前端
炸土豆9 分钟前
防抖节流里的this传递
前端·javascript
用户40993225021210 分钟前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
山璞12 分钟前
Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信,以及如何调试
前端·flutter
努力早日退休15 分钟前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希15 分钟前
手写Promise--教学版本
前端·javascript·面试
ETA819 分钟前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫694519 分钟前
图片列表滚动掉帧的原因分析与解决方案
前端
3秒一个大21 分钟前
现代前端开发框架的工程化实践:基于 Vite 与 Vue3
vue.js
狗哥哥22 分钟前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试