vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

mintui是饿了么团队针对vue开发的移动端组件库，方便实现移动端的一些功能，这里只用了Loadmore功能实现移动端的上拉分页刷新，下拉加载数据，废话不说上代码。

<template> 
 <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> 
 <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> 
 <ul class="list" v-for="(val, key) in pageList"> 
 <li> 
 <div>我是小11</div> 
 <div>我是小11</div> 
 </li> 
 </ul> 
 </v-loadmore> 
 </div> 
</template> 
<script> 
 import {Loadmore} from 'mint-ui'; 
 export default { 
 data:function() { 
 return { 
 searchCondition:{ //分页属性 
 pageNo:"1", 
 pageSize:"10" 
 }, 
 pageList:[], 
 allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了 
 scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动 
 } 
 }, 
 components: { 
 'v-loadmore':Loadmore // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题 
 // 推荐应用组件时用a-b形式起名 
 }, 
 mounted(){ 
 this.loadPageList(); //初次访问查询列表 
 }, 
 methods: { 
 loadTop:function() { //组件提供的下拉触发方法 
 //下拉加载 
 this.loadPageList(); 
 this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位 
 }, 
 loadBottom:function() { 
 // 上拉加载 
 this.more();// 上拉触发的分页查询 
 this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位 
 }, 
 loadPageList:function (){ 
 // 查询数据 
 this.api.PageList(this.searchCondition).then(data =>{ 
 // 是否还有下一页，加个方法判断，没有下一页要禁止上拉 
 this.isHaveMore(data.result.haveMore); 
 this.pageList = data.result.pageList; 
 this.$nextTick(function () { 
 // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写， 
 // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果， 
 // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好 
 this.scrollMode = "touch"; 
 }); 
 }); 
 }, 
 more:function (){ 
 // 分页查询 
 this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1; 
 this.api.loadPageList(this.searchCondition).then(data=>{ 
 this.pageList = this.pageList.concat(data.result.pageList); 
 this.isHaveMore(data.result.haveMore); 
 }); 
 }, 
 isHaveMore:function(isHaveMore){ 
 // 是否还有下一页，如果没有就禁止上拉刷新 
 this.allLoaded = true; //true是禁止上拉加载 
 if(isHaveMore){ 
 this.allLoaded = false; 
 } 
 } 
 } 
 } 
</script> 

花了点时间整理了下代码，复制后改改就能用了，当然你要有基本的vue开发框架，并且有点开发基础，代码很简单，这个插件很好用，效果不错，加载时的文字什么的可以自己修改，比如增加箭头什么的，可以看文档。

PS：有个坑一定要注意就是注释里说的iPhone里loadmore和-webkit-overflow-scrolling属性冲突无法上拉问题，还是vue学的不精，浪费了太多时间，引以为戒

好土汽车网还为您提供以下相关内容希望对您有帮助：

```2.?组件级(借助[coolui-scroller](https://wzs28150.github.io/coolui-scroller/v3/)):```//jsdata:{???loadMoreSetting:{???status:'more',???moreText:'上拉加载更多',???loadingText:'加载中...',???noMoreText:'--我是有底线的--',???color:'#999',???},???list:[],???tota...

封装可复用列表组件涉及到的vue技术点props父组件把请求api地址和请求参数传递给组件。v-slot作用域插槽父组件可以访问子组件item数据，解耦UI布局。mint-uiLoadmore组件实现上拉加载更多。

首先放上mint-ui中文文档 近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。介...

首先你需要提交你的公司的资料信息，地址信息 ，公司名称 以及电话信息，门脸照片给官方，提交给官方后，他们会审核的，一般都是 1-7个工作日审核 审核通过后1-3天时间展现 如果发现地图有错误，可以进行纠错处理。

(下拉刷新06-自定义刷新控件)上拉刷新01-默认 self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{ // 进入刷新状态后会自动调用这个block }];或 // 设置回调（一旦进入刷新状态，就调用target的action，也就是调用self的loadMoreData方法）self.tableView.mj_footer = ...

//loadData 为你下拉刷新时请求网络数据的方法 loadMoreData为你上拉加载时请求网络数据的方法 3. [self gif]- (void)gif { NSMutableArray *idleImages = [NSMutableArray array];//这块为你刷新时出现的gif图 需要循环添加到数组中 for (NSUInteger i = 1; i <= 5; i++) { UIImage *...