vue+vant 上拉加载，下拉刷新

最新推荐文章于 2025-06-19 22:23:49 发布

0?0

最新推荐文章于 2025-06-19 22:23:49 发布

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue2学习记录

本文链接：https://blog.youkuaiyun.com/weixin_42301962/article/details/106941067

Vue2学习记录专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中结合Vant UI库实现上拉加载和下拉刷新功能，详细阐述了配置过程和关键代码，帮助开发者提升页面滚动交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <div class="container">
    <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list" v-for="(item,index) in list" :key="index">
          <div class="list-left">
            <span>{{item.mark}}</span>
            <span>{{item.created_at}}</span>
          </div>
          <div class="list-right">
            <span class="red">{{item.money}}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-empty description="没有数据" v-if="list==null" />
  </div>
</template>
<script>
export default {
  name: "balanceRecord",
  data() {
    return {
      list: [],
      page: 1, //页码
      loading: false, //上拉加载
      finished: false, //上拉加载完毕
      refreshing: false //下拉刷新
    };
  },
  created: function() {
    this.$emit("header", true, "余额明细", true);
    this.$emit("footer", false);
    this.record();
  },
  methods: {
    // 列表
    record() {
      let _this = this;
      _this.$http.get(_this.$http.userMoneyLog, {
          params: {
            ptype: 2,
            page: _this.page
          }
        }).then(response => {
          if (response.code == 200) {
            if (response.data.data.length > 0) {

              if (_this.page > 1) {
                if (_this.loading) {
                  if(response.data.data.length < 20){
                    _this.list = _this.list.concat(response.data.data);
                    _this.finished = true;  //完成加载
                  }else{
                    _this.list = _this.list.concat(response.data.data);
                    _this.finished = false;  //加载中
                  }
                }
              }else{
                if(response.data.data.length < 20){
                  _this.list = response.data.data; //第一次加载
                  _this.finished = true;  //完成加载
                }else{
                  _this.list = response.data.data; //第一次加载
                }
              }

            }else {
              _this.list = null;
            }
          }else {
            _this.$toast(response.msg);
          }
        }).catch(function(xhr, error) {
          _this.error = true;
        })
    },
    // 上拉加载
    onLoad() {
      let _this = this;
      _this.page++;
      _this.record();
      _this.loading = true;
    },
    // 下拉刷新
    onDownRefresh() {
      let _this = this;
      _this.page = 1;
      _this.refreshing = false;
      if(_this.list.length>20){
        _this.finished = false;  //加载中
      }
      _this.loading = false;
      _this.$toast('刷新成功');
      _this.record();
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: calc(100vh - 46px);
  .list {
    width: 100%;
    height: 56px;
    padding: 0 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 1.3rem;
    color: #b2b2b2;
    border-bottom: 1px solid #f7f7f7;
    .list-left {
      span {
        display: block;
        &:first-child {
          color: #181947;
          font-size: 1.6rem;
          line-height: 24px;
        }
      }
    }
    .list-right {
      span {
        display: block;
        &:first-child {
          color: #181947;
          font-size: 1.6rem;
          line-height: 24px;
          text-align: right;
        }
      }
    }
  }
}
</style>