下载:https://pan.baidu.com/s/1c125Vgc

一个简单的分页控件:

自动加载模式:

手动加载模式:

loading图标使用了iconfont:

主要方法:

  beginRefreshing( {isFirstLoad:true} ):开始加载

    可选参数:isFirstLoad 表示是否首次加载

  endRefreshing( {finish:flase} ):结束加载

    可选参数:finish 表示数据是否全部加载完成

  reset():

    设置刷新控件为初始状态

注册使用:

  import refresh from '../component/MJRefresh';

  <refresh ref="refreshEle" table-id="listPanel" refresh-type="hand" :refresh-block="getReportList"></refresh>

如:

  

<div id="listPanel" class="content">
		<i @click="changeType" class="iconfont" :class="[selectType]"></i>
		<div v-show="reportData.length > 0">
			<div @click="itemSelect(item.contents,item.ID,item.url)" v-for="(item,index) in reportData" key="item" class="item">
				{{getSimpleContents(item.contents)}}(访问量:{{item.point}})
			</div>
		</div>
		<refresh ref="refreshEle" table-id="listPanel" refresh-type="hand" :refresh-block="getReportList"></refresh>
		<!-- <cover v-if="isView == false"></cover> -->
		<prompt-box :mes="promptBox.mes" v-model="promptBox.show" :callback="promptBox.callback"></prompt-box>
	</div>

  

  其中table-id为列表容器的ID,

    refresh-block为加载开始后触发的方法,

    refresh-type:auto为自动模式,hand为手动模式

    ref是组件的唯一标识,我们可以使用ref来调用内部方法:

      this.$refs.refreshEle.beginRefreshing({isFirstLoad:true});//isFirstLoad表示是否首次加载(即加载第一页的数据)

      this.$refs.refreshEle.endRefreshing({finish:flase});//finish表示 是否所有数据全部加载完成,

vue分页控件的更多相关文章

  1. 在DevExpress程序中使用Winform分页控件直接录入数据并保存

    一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...

  2. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  3. asp.net分页控件

    一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Reg ...

  4. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  5. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  6. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  7. AspNetPager分页控件配置

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: 拖过来之后,设置如下属性: <webdiye ...

  8. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

  9. 分页控件layui的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json ...

随机推荐

  1. python------接口(get请求、post请求), 图片、歌曲下载,网页返回,上传文件

    接口(get请求.post请求 --json), 图片.歌曲下载(context),网页返回(text),上传文件   import requests######################### ...

  2. [qemu][kvm] 在kvm嵌套kvm的虚拟机里启动kvm加速

    常规情况下,如果在kvm的虚拟机里,又想使用kvm的虚拟机,会报如下的错误信息: [root@host0 nlb]# Could not access KVM kernel module: No su ...

  3. intellij idea 的全局搜索快捷键方法

    1.Ctrl+N按名字搜索类 相当于eclipse的ctrl+shift+R,输入类名可以定位到这个类文件,就像idea在其它的搜索部分的表现一样,搜索类名也能对你所要搜索的内容多个部分进行匹配,而且 ...

  4. python tkinter button

    """小白随笔,大佬勿喷""" '''Button按钮 点击执行对应的命令''' import tkinter as tk #初始化窗口 w ...

  5. vue中生成二维码

    <template> <div id="qrcode" ></div> </template> <script> imp ...

  6. python second lesson

    1.系统模块 新建的文件名不能和导入的库名相同,要不然python会优先从自己的目录下寻找. import sys  sys是一个系统变量,sys.argv会调出文件的相对路径,sys.argv[2] ...

  7. 对象缓冲池 ( cc.pool ) :

    对象缓冲池 ( cc.pool ) : 作用 : 优化创建效率 , 尤其是针对需要多次创建的情况 . 缓冲池 API : 缓冲池 ( cc.pool ) 提供的函数并不多 , 只有5个 . cc.po ...

  8. poj 1164 深度优先搜索模板题

    #include<iostream> //用栈进行的解决: #include<cstdio> #include<algorithm> #include<cst ...

  9. 安装caffe-ssd或者caffe时make all,make pycaffe,make test运行慢的问题

    之所有运行慢,是因为没有在这三条语句后面加上 -j,即没用全部的进程运行,不加-j 表示用单一进程运行,加上-j5表示用5个进程,-j不带数字表示用所有进程

  10. 灵雀云率先成为 Linux 基金会/CNCF官方认证培训合作伙伴

    近日,灵雀云Alauda成为Linux基金会/CNCF授权培训伙伴项目( Linux Foundation Authorized Training Partner Program,以下简称ATP)在国 ...