vue 分页请求「建议收藏」

vue 分页请求「建议收藏」简单说一下vue中数据分页请求的做法首先引入Loadmore:import{Loadmore}from’mint-ui’;注册组件:components:{‘v-loadmore’:Loadmore},接下来:<v-loadmore:bottom-method="loadBottom":bottom-all-loaded="allLoa…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

简单说一下vue中数据分页请求的做法

首先引入Loadmore:

import {Loadmore} from 'mint-ui';

注册组件:

components: {
    'v-loadmore':Loadmore
},

接下来:

<v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">

要在data中加入一下数据

data(){
    reture{
        loadAll:false,
        pageNo:0,         //请求的页数(可自定义)
        pageSize:20,      //请求的条数(可自定义)
        allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了
    }
}

在执行上拉操作的时候

loadBottom() {
   // 上拉加载
   this.more();// 上拉触发的分页查询
   this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位
},

// 这个 this.more() 是 请求后台的接口

注:在调用 this.more() 这个方法的时候,要this.loadAll = true;并且this.pageNo = parseInt(this.pageNo) + 1;
每次下拉操作的时候请求的页数+1

初始化的时候要默认显示20条

mounted(){ this.more() }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186941.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 空指针引用故障(空指针解引用)「建议收藏」

    空指针引用故障(空指针解引用)「建议收藏」C语言中的指针机制使得它灵活高效,但由于指针操作不当产生的动态内存错误也有很多,比如内存泄漏(MemoryLeakage)、内存的重复释放、空指针解引用(NullPointerDereference)。其中空指针引用故障,也叫空指针解引用是一类普遍存在的内存故障,是程序设计语言中一类常见的动态内存错误。指针变量可以指向堆地址、静态变量和空地址单元。当指针指向无效内存地址时对其引用,有可能…

  • CAN协议要点及车辆CAN协议激活成功教程

    CAN协议要点及车辆CAN协议激活成功教程一、CAN协议要点1.电压2.波形3.CAN报文概述CAN一共规定了5中类型的帧,帧也称为报文。CAN总线的数据帧有标准格式(StandardFormat)和扩展格式(ExtendedFormat)的区分。4.CAN报文编码格式Intel格式编码 当一个信号的数据长度不超过1Byte,并且信号在一个字节内实现时,该信号的高位(S_msb)将被放在该字节的高位,信号的低位(S_lsb)将被放在该字节的低位。 当一个信号的数据长度超过..

  • 全球最大手游源码共享网站_传奇手游开发定制

    全球最大手游源码共享网站_传奇手游开发定制今天分享个最简单,最直接的游戏源码和教程最容易搭建的一键端,改几个IP就可以了,纯小白也能搭建成功。服务器系统:win82008企业版我的配置:2H4G2M教程开始:直接解压到D盘解压完的路径是这样的D:\MTJ(记得检查下,不要有任何操作)第一步,打开【JAVA一键环境设置】,点击一键【环境变量】,设置成功第二步,打开【phpStudy】文件,打开文件夹【huluxia】把里面的文件…

  • XXE攻防

    XXE攻防目录前言什么是XXE脑图什么是XMLXML基本语法文档类型定义(DTD)实体XXE攻击分类检测XXE存在任意文件读取SSRF攻击执行系统命令探测内网端口BlindXXE漏洞靶机实测Vulnhub搭建任意文件读取获取flag靶机实测XXE-lab防御方式使用开发语言提供的禁用外部实体的方法过滤用户提交的XML数据参考前言什么是XXEXXE(XMLExternalEntityInjection)即XML外部实体注入,攻击者通过向服务器注入指定的XML实体内容,从而让服务器按照指定的配置进行执行,

  • seo绩效考核指标_kpi考核三大指标内容

    seo绩效考核指标_kpi考核三大指标内容想要知道SEO优化有没有效果,都是需要以网站数据为前提的,包括网站收录情况、关键词排名情况、网站流量的多少及网站访客转化情况等,来算出最终的投入产出比是多少。一、内容页面关键词排名考核指标利用原创内容矩阵可以实现对某一类长尾关键词的覆盖,也是达成目标的一个基础手段,为此你可以在数据监测软件中对这部分关键词进行定期跟踪,确保达到预期效果。二、外链的数量与质量高质量的原创内容是获取高质量外链的…

  • Arduino智能小车——循迹篇

    Arduino智能小车——循迹篇Arduino智能小车——循迹篇  相信大家都在网上看到过类似下图这样的餐厅服务机器人,或者仓库搬运机器人,但是你们有没有注意到图片中地上的那条黑线?没错,他们都是沿着这条黑线来行进的,在这一篇将教大家怎么用小车实现类似的循迹功能。准备材料循迹模块  在此我们使用循迹模块TCRT5000,该模块体积小,灵敏度较高,还可以通过转动上面的电位器来调节检测范围。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号