vue vantUI上拉刷新

最新推荐文章于 2025-10-28 19:24:38 发布

原创最新推荐文章于 2025-10-28 19:24:38 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何利用Vue组件VanList实现列表数据的动态加载与刷新。通过设置动态pageSize并结合onLoad事件触发异步请求，实现数据的分页加载，避免一次性加载大量数据导致的性能问题。

List 列表

没啥好说的，只是用van-list包裹需要刷新的div，设置好动态pageSize，

记得在onload事件加上异步，否则，瞬间给你刷新到了9999999

<template>
  <div class="top">
    <div v-if="!openData.length">暂无开门记录~</div>
    <div v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div v-for="item in openData" :key="item.RE_ID">
          <div class="container">
            <div v-if="item.PHOTO === undefined"><img src='../../../assets/images/noPhoto.jpg' /></div>
            <div v-else><img :src=item.PHOTO /></div>
            <div>设备：{{item.DEV_NAME}}</div>
            <div>类型：{{item.TYPE}}</div>
            <div>开门人：{{item.REAL_NAME}}</div>
            <div>开门时间：{{item.ACCESS_TIME}}</div>
          </div>
      </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {getAjax} from '../../../assets/common/REQUEST'
export default {
  name: 'Visiting',
  data () {
    return {
      openData: [],
      pageSize: 15,
      loading: false,
      finished: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      getAjax('/api/door/accessList?pageSize=' + this.pageSize).then(res => {
        this.openData = res.data.list
      })
    },
    onLoad () {
      setTimeout(() => {
        this.loading = false
        this.pageSize += 15
        this.getData()
      }, 100)
    }
  }
}
</script>

<style scoped>
.container{
  background: white;
  margin-top: 10px;
  overflow:hidden;
}
.container img{
  float: left;
  width: 30%;
  /*max-width: 123px;*/
  padding: 8px;
  margin-left: 12px;
}
.container div{
  margin-top: 4px;
  font-size: 12px;
}
</style>