vant列表滚动加载

爬坑的小白2023-09-07 21:55

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++ // 分页数加一
    },
 }