1.0.2 • Published 8 months ago
jx-vue2-load-more v1.0.2
介绍
基于vue2.0的上拉加载更多 组件
组件使用
安装
npm install --save jx-vue2-load-more
使用
<template> <div id="app"> <div v-for="(item, i) in list" :key="i"> <p class="item">{{item.name}}</p> </div> <load-more :status="loadingType" @loadMoreData="loadMoreData" </load-more> </div> </div> </template> <script> import loadMore from 'jx-vue2-load-more'; export default { name: 'App', data() { return { list: [], loadingType: 'more', pageNo: 1, // 当前页数 isLastPage: 5 //总页数 } }, components: { loadMore }, mounted() { this.loadData() }, methods: { loadData() { this.loadingType = 'loading' setTimeout(() => { this.list = this.list.concat([{ name: '第'+this.pageNo +'条' }, { name: '第'+this.pageNo +'条' }, { name: '第'+this.pageNo +'条' }, { name: '第'+this.pageNo +'条' }, { name: '第'+this.pageNo +'条' }, { name: '第'+this.pageNo +'条' }]) this.loadingType = (this.pageNo < this.isLastPage) ? 'more' : 'noMore' }, 1000) }, loadMoreData() { if(this.loadingType === 'loading' || this.loadingType === 'noMore') { //防止重复加载 return; } this.pageNo ++ this.loadData() } } } </script> <style> .item { line-height: 200px; } </style>
属性配置说明
loadingType 当前状态(more代表可加载更多,noMore代表已是最后一页,loading代表加载中。默认值为more); @loadMoreData 加载下一页内容。