Loadmore —— 下拉/上拉刷新，支持自定义 HTML 模板
vue 2017-09-29 14:13:50

参考资料：http://mint-ui.github.io/docs/#/zh-cn2/loadmore

组件解析：http://blog.csdn.net/u010014658/article/details/72912200

引入

JavaScript Code复制内容到剪贴板
  1. import { Loadmore } from 'mint-ui';  
  2.  
  3. Vue.component(Loadmore.name, Loadmore);  

例子

XML/HTML Code复制内容到剪贴板
  1. <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">  
  2.   <ul>  
  3.     <li v-for="item in list">{{ item }}</li>  
  4.   </ul>  
  5. </mt-loadmore>  

 

JavaScript Code复制内容到剪贴板
  1. export default {  
  2.     data:function() {  
  3.         return {  
  4.             msg: '单词学习',  
  5.             topStatus: ''  
  6.         }  
  7.     },  
  8.     mounted(){  
  9.         this.init();          //初次访问重新设置标题名  
  10.     },  
  11.     methods: {  
  12.         init:function () {  
  13.             this.$store.commit('changePageTitle', '学习列表');  
  14.         },  
  15.         handleTopChange(status) {  
  16.             this.topStatus = status;  
  17.         },  
  18.     }  
  19. }  

 

自定义 HTML 模板

可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板

XML/HTML Code复制内容到剪贴板
  1. <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">  
  2.   <ul>  
  3.     <li v-for="item in list">{{ item }}</li>  
  4.   </ul>  
  5.   <div slot="top" class="mint-loadmore-top">  
  6.     <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>  
  7.     <span v-show="topStatus === 'loading'">Loading...</span>  
  8.   </div>  
  9. </mt-loadmore>  

需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 slot 属性为 top，类名为 mint-loadmore-top。

当用户滑动组件时，组件会有以下几个状态：

  • pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置
  • drop：按下的距离不小于 topDistance，此时释放会触发 top-method
  • loading：组件已被释放，top-method 正在执行 每当组件的状态发生变化时，loadmore 都会触发 top-status-change 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 handleTopChange 方法来处理组件状态的变化。

 

本文来自于：http://www.yoyo88.cn/study/vue/162.html

上一篇 完整的上拉加载，下拉刷新demo
下一篇 完整的Infinite scroll无限滚动指令，下拉刷新demo / loadmore【同步官方文档同步】
相关的文章
Powered by yoyo苏ICP备15045725号