Vue 分页功能伪代码实现
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 分页功能伪代码实现的更多相关文章
- 测试开发【提测平台】分享9-DBUntils优化数据连接&实现应用搜索和分页功能
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 从本期开始知识点讲以思维导图的形式给出,内容点会按照讲解-应用-展示的形式体现,这样会更清晰些. DBUntils连接池 在项目中链接数据 ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- C# Web分页功能实现
无论是网站还是APP分页功能都是必不可少的.为什么使用分页呢? 1,加载速度快,不会占用服务器太多资源,减少服务器压力. 2,减少数据库压力. 3,提升用户体验. 那么我们常用的分页方法有两种. 1, ...
- 简单封装分页功能pageView.js
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
- php对文本文件进行分页功能简单实现
php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...
- Asp.net MVC3表格共用分页功能
在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页. 第一 ...
- WinForm DataGridView分页功能
WinForm 里面的DataGridView不像WebForm里面的GridView那样有自带的分页功能,需要自己写代码来实现分页,效果如下图: 分页控件 .CS: 1 using System; ...
- Net 分页功能的实现
首先写一个接口 1 2 3 4 5 6 public interface IPagedList { int CurrentPageIndex { get; set; } ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
随机推荐
- [MSSQL]找出一天数据中从第一条数据开始每累加1小时的数据
用Sql Server找出一天数据中从第一条数据开始每累加1小时的数据 -- ============================================= -- Author: Alle ...
- Loj #3085. 「GXOI / GZOI2019」特技飞行
Loj #3085. 「GXOI / GZOI2019」特技飞行 题目描述 公元 \(9012\) 年,Z 市的航空基地计划举行一场特技飞行表演.表演的场地可以看作一个二维平面直角坐标系,其中横坐标代 ...
- 使用Docker构建Jekyll框架网站
使用Docker构建Jekyll框架网站 使用dockerfile构建apache + jekyll 目录 Jekyll基础镜像 构建Jekyll基础镜像 Apache镜像 构建Jekyll Apac ...
- Distributed and Parallel Computing
Omega Network Model
- WPF DataGrid横向显示
前言 利用各种变换,将其水平改向至横向显示. 注意的是要固定好单元格的高宽,或者手动编写style 否者在滚动的时候,会有高宽比例不一样的时候 再其次,要注意datagrid的容器或者datagrid ...
- 用vscode开发vue应用
阅读 3237 收藏 205 2019-05-02 原文链接:segmentfault.com 云服务器 1 核 2G , 9元/月 ,买十送二,99/年!!!快来上车!developer.huawe ...
- Linux学习笔记之AIX系统上压缩与解压文件
0x00 概述 AIX机器真难用,一时半会还真适应不了. 0x01 压缩tar 命令格式: # tar -cvf (或xvf)+文件名+设备 C:是本地到其他设备 x:是其他设备到本地 r:是追加 ...
- Java基础笔记之数据类型
一.数据类型 (一)8种基本数据类型(内置数据类型\C#中为值类型) 字符长度:1byte = 8 bit; 布尔:可认为是 1byte (8 bit);
- 初始认知学习 .net core 逐步加深
1.一般用空项目练手 2.一般你已经有数据库的情况下使用如下的方式 开始生成类的操作 这里我使用的是Database First模式,使用工具Scaffold-DbContext(数据库上下文脚手架) ...
- layui的使用说明
一.定义 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,跟其他UI框架比较(比如bootstrap.easyui.findui.topu ...