Vue分页功能的实现

其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了

// 这里我们假设后端已经写好了 pageNum和pagesize

  <van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<!-- 此处的内容为后台的列表数据-->
<van-list>
//
getList(){
axios.get('https://www.daxunxun.banner'+ pageNum).thent(res=>{
//这里大致上来只是一个形式
this.data = this.data.concat(res.data||[])
// 但传入的pagenum和pageszie如果过大的话 后台的数据没有的话 那么后台传来的数据就是为空数组
// 假设已经设置好了一个data 那么直接对他进行赋值是不可取的。此时需要对他进行整合 concat 合并数组
})
} onLoad() {
// 更新数据
// this.finished = true
this.loading = true;
// eslint-disable-next-line no-plusplus
this.pageNum++;
// 每次出发加载函数的收后pagenum都会++ this.getList();
// 加载状态结束
setTimeout(() => {
this.loading = false;
}, 500); // 数据全部加载完成
// }, 500);
},

虽然翻页功能实现起来相当简单 但是有些公司的ajax是封装过的 所以我把大致的一个实现思路分享了一下

Vue 分页功能伪代码实现的更多相关文章

  1. 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...

  2. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  3. C# Web分页功能实现

    无论是网站还是APP分页功能都是必不可少的.为什么使用分页呢? 1,加载速度快,不会占用服务器太多资源,减少服务器压力. 2,减少数据库压力. 3,提升用户体验. 那么我们常用的分页方法有两种. 1, ...

  4. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  5. php对文本文件进行分页功能简单实现

    php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...

  6. Asp.net MVC3表格共用分页功能

    在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页. 第一 ...

  7. WinForm DataGridView分页功能

    WinForm 里面的DataGridView不像WebForm里面的GridView那样有自带的分页功能,需要自己写代码来实现分页,效果如下图: 分页控件  .CS: 1 using System; ...

  8. Net 分页功能的实现

    首先写一个接口   1 2 3 4 5 6 public interface IPagedList     {         int CurrentPageIndex { get; set; }   ...

  9. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

随机推荐

  1. [MSSQL]找出一天数据中从第一条数据开始每累加1小时的数据

    用Sql Server找出一天数据中从第一条数据开始每累加1小时的数据 -- ============================================= -- Author: Alle ...

  2. Loj #3085. 「GXOI / GZOI2019」特技飞行

    Loj #3085. 「GXOI / GZOI2019」特技飞行 题目描述 公元 \(9012\) 年,Z 市的航空基地计划举行一场特技飞行表演.表演的场地可以看作一个二维平面直角坐标系,其中横坐标代 ...

  3. 使用Docker构建Jekyll框架网站

    使用Docker构建Jekyll框架网站 使用dockerfile构建apache + jekyll 目录 Jekyll基础镜像 构建Jekyll基础镜像 Apache镜像 构建Jekyll Apac ...

  4. Distributed and Parallel Computing

    Omega Network Model

  5. WPF DataGrid横向显示

    前言 利用各种变换,将其水平改向至横向显示. 注意的是要固定好单元格的高宽,或者手动编写style 否者在滚动的时候,会有高宽比例不一样的时候 再其次,要注意datagrid的容器或者datagrid ...

  6. 用vscode开发vue应用

    阅读 3237 收藏 205 2019-05-02 原文链接:segmentfault.com 云服务器 1 核 2G , 9元/月 ,买十送二,99/年!!!快来上车!developer.huawe ...

  7. Linux学习笔记之AIX系统上压缩与解压文件

    0x00 概述 AIX机器真难用,一时半会还真适应不了.   0x01 压缩tar 命令格式: # tar -cvf (或xvf)+文件名+设备 C:是本地到其他设备 x:是其他设备到本地 r:是追加 ...

  8. Java基础笔记之数据类型

    一.数据类型 (一)8种基本数据类型(内置数据类型\C#中为值类型) 字符长度:1byte = 8 bit; 布尔:可认为是 1byte (8 bit);

  9. 初始认知学习 .net core 逐步加深

    1.一般用空项目练手 2.一般你已经有数据库的情况下使用如下的方式 开始生成类的操作 这里我使用的是Database First模式,使用工具Scaffold-DbContext(数据库上下文脚手架) ...

  10. layui的使用说明

    一.定义 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,跟其他UI框架比较(比如bootstrap.easyui.findui.topu ...