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++ // 分页数加一
    },
 }
相关推荐
爱编程的鱼6 小时前
C# 枚举(Enum)声明与使用详解
java·windows·c#
进取星辰11 小时前
Windows 10 上运行 Ollama 时遇到 llama runner process has terminated: exit status 2
windows·llama
sukalot12 小时前
Windows同步技术-使用命名对象
windows
快乐点吧13 小时前
【Flume 】Windows安装步骤、配置环境
大数据·windows·flume
Java手札14 小时前
Windows下Golang与Nuxt项目宝塔部署指南
开发语言·windows·golang
心灵宝贝14 小时前
Postman-win64-7.2.2 安装教程(Windows 64位详细步骤)
windows·测试工具·postman
快乐点吧17 小时前
【MongoDB】windows安装、配置、启动
数据库·windows·mongodb
Java-云海21 小时前
微软官网Win10镜像下载快速获取ISO文件
windows·microsoft·虚拟机·iso镜像·windows10系统
Clank的游戏栈1 天前
Unity多线程渲染指令队列设计与集成技术详解
windows·unity·游戏引擎
sukida1001 天前
BIOS主板(非UEFI)安装fedora42的方法
linux·windows·fedora