专栏首页前端开发随笔VantUI实现list列表分页显示

VantUI实现list列表分页显示

<template>
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="offset"
      loading-text="正在拼命加载中..."
      finished-text="暂无更多内容了"
      @load="getrecord"
    >
      <div class="row"></div>
    </van-list>
  </div>
</template>

<script>
import { getStudyRecordList } from "../axios/request";
export default {
  data() {
    return {
      record_list: [],
      page: 0,
      loading: false,
      finished: false,
      offset: 0
    };
  },
  mounted() {},
  methods: {
    async getrecord() {
      this.page += 1;
      this.loading = true;
      this.finished = false;
      const res = await getStudyRecordList({ page: this.page, limit: 10 });
      if (res.status == 1) {
        this.record_list = this.record_list.concat(res.data)
        }
        this.loading = false;
      } else {
        this.finished = true;
      }
    }
  }
};
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序引用we-cropper裁切图片

    文档地址 github下载源码直达链接 复制dist文件夹中的 .min.js 和 .wxml文件到项目中

    wePanda
  • Vue实现移动端购物车功能

    wePanda
  • Vue页面中引用自定义组件

    比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件

    wePanda
  • 常见的网页加载进度条

    我们为什么要做网页加载进度条? 是为了让用户的等待不再枯燥,让用户有一个等待的目标. 为什么要页面加载? 这些网站打开后网页上面需要加载一些控件以使网页上...

    河湾欢儿
  • React多页面应用5(webpack4 多页面自动化生成多入口文件)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • 最新的spring boot技术实现登录、列表、分页、上传等功能

    项目分层 Controller层,追求极简,分页自己进行了一个简单封装 package com.moxi.controller;

    关忆北.
  • 一种计算用户留存的方法

    用户留存分析是互联网时代常用的一种数据分析方法。而很多快速发展的公司并没有相应的方法论沉淀,这就导致了在计算用户留存的时候会出现下面的一些问题:1)用户留存的定...

    木东居士
  • Linux系统调用过程

    1 系统调用的作用 系统调用是操作系统提供给用户(应用程序)的一组接口,每个系统调用都有一个对应的系统调用函数来完成相应的工作。用户通过这个接口向操作系统申请服...

    233333
  • Flex简单小程序

    三产
  • jQuery

    jQuery基础 1、    jQuery其实就是一个类库,集成了DOM/BOM/JavaScript的类库 http://jquery.cuishifen...

    coders

扫码关注云+社区

领取腾讯云代金券