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学的不精，浪费了太多时间，引以为戒

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。