vue分页控件

下载: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表示 是否所有数据全部加载完成,