vant列表滚动加载

1:html @load="onLoad" offset="30"

复制代码
 <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="30"
    >
      <div class="hotel_box">
        <div class="box" v-for="item in list" :key="item.id" @click="item.numbers > 0 ? $router.push(`/goDetails?id=${item.id}`) : ''">
          <div>
            <van-image fit="cover" lazy-load :src="item.stu && item.stu.image_url ? item.stu.image_url : ''"/>
            <div class="repair" v-if="item.numbers === 0">
              <span>补货中</span>
            </div>
            <div class="box1">
              <span class="name">{{ item.stu.name }}</span>
              <span class="desc">{{ item.stu.desc || "..." }}</span>
              <span class="price">¥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>

2:methods onLoad()

复制代码
data () {
    return {
      // 默认列表
      list: [],
      loading: false,
      finished: false,
      page: 1,
      pageSize: 8,
      rowCount: ''
    }
  },
 methods: {
    // 获取商品
    getHotelList () {
      this.loading = true
      this.finished = false
      const applets = JSON.parse(localStorage.getItem('applets'))
      getList({
        hotel_id: applets.hotelId,
        hotel_group_id: applets.hotel_group_id,
        end_datetime__gt: dateFmt.dateFormat(new Date()),
        page_size: this.pageSize,
        page: this.page
      }).then(res => {
        if (res.message === 'success') {
          this.rowCount = res.data.count
          //  将数据放入数组
          this.list.push(...res.data.results)
          this.loading = false // 加载状态结束
          this.list.length >= this.rowCount ? (this.finished = true) : ''
          // 如果list长度大于等于总数据条数,数据全部加载完成
          // this.finished = true 结束加载状态
        } else {
          this.loading = false // 结束加载状态
          this.finished = true // 加载状态结束
        }
      })
    },
    onLoad () {
      this.getHotelList()
      this.page++ // 分页数加一
    },
 }
相关推荐
黛色正浓4 分钟前
【Anaconda】Anaconda创建虚拟环境并管理
windows·python·conda
孪生质数-14 分钟前
2-Visual Studio 2022 NET开发Windows桌面软件并连接SQL Server数据库
数据库·windows·sqlserver·visual studio
越甲八千2 小时前
pyqt SQL Server 数据库查询-优化2
数据库·windows·pyqt
virelin_Y.lin3 小时前
系统与网络安全------Windows系统安全(6)
windows·安全·系统安全·共享文件夹
ENE5 小时前
WIN11 24H2关闭基于虚拟化安全
windows
Bruce_Liuxiaowei5 小时前
基于Flask的Windows命令大全Web应用技术解析与架构设计
前端·windows·python·flask
yyywxk7 小时前
Linux / Windows 下 Mamba / Vim / Vmamba 安装教程及安装包索引
linux·windows·vim
Qlittleboy14 小时前
windows如何安装wkhtmltoimage 给PHP使用根据HTML生成图片
开发语言·windows·php
sqmeeting15 小时前
Linux NUC小主机化身视频会议服务器: 技术优势与部署实战
linux·服务器·windows·音视频·实时音视频
virelin_Y.lin17 小时前
系统与网络安全------Windows系统安全(9)
windows·web安全·系统安全·iis