下载: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. RGBA与Opacity

    rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.

  2. [Day9]面向对象

    1.面向过程与面向对象 (1)面向对象思维方式是一种更符合人们思考习惯的思想 (2)面向过程思维方式中更多的体现的是执行者,而面向对象中更多的体现的是指挥者 (3)面向对象思维方式将复杂的问题简单化 ...

  3. @Value("${xxxx}")注解的配置及使用

    代码中的用法 Spring 通过@Value注解获取*.porperties文件code的内容,然后赋值给使用该注解的Code属性上. @Value("${code}") priv ...

  4. Centos7.1环境下搭建BugFree

    环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1. 安装apache yum install httpd  2. 安装mysql yum inst ...

  5. iOS UI基础-21 WKWebView

    WKWebView,直接显示网页,需要引入第三方类:https://github.com/marcuswestin/WebViewJavascriptBridge 加上进度条代码,很完美使用 webV ...

  6. #WEB安全基础 : HTTP协议 | 0x8 HTTP的Cookie技术

    说道Cookie,你喜欢吃饼干吗? 这里的Cookie不是饼干=_= HTTP不对请求和响应的通信状态进行保存,所以被称为无状态协议,为了保持状态和协议功能引入了Cookie技术 Cookie技术在请 ...

  7. Python记录10:模块

    ''' 1. 什么是模块     模块就一系列功能的集合体 模块有三种来源:         1. 内置的模块         2. 第三方的模块:pip install +模块名称         ...

  8. 大堆文字不如几张图片-论信息传递的方式以NodeMCU入门为例

  9. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  10. 清理Visual Studio 2017的项目历史记录或手工修改Visual Studio 2017的注册表设置

    Visual Studio 2017的"最近的文件列表"和"项目列表"总是删了之后重启电脑又出现(PS:这期间没有打开过项目,更没打开过VS). 一怒之下,按照 ...