<template>

<div class="page-loadmore">
<h1 class="page-title">Pull up</h1> <div class="page-loadmore-wrapper" ref="wrapper" :style="{height : wrapperHeight + 'px' }">
<mt-loadmore
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
@bottom-status-change="handleBottomChange"
:auto-fill="false"
ref="loadmore"
> <ul class="page-loadmore-list">
<li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
</ul> <div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div> </mt-loadmore>
</div>
</div>
</template> <script>
export default {
data() {
return {
list: [],
totalLength:'', //数据总长度
nowLength:'', //当前list的长度
nextLength:'', //下一次的长度
num:, //每页的数量
allLoaded: false, //是否全部加载
wrapperHeight: , bottomStatus:''
};
}, methods: {
handleBottomChange(status){
this.bottomStatus = status;
},
loadBottom() {
setTimeout(() => {
//console.log('nowLength:',this.nowLength) //10
//console.log('totalLength:',this.totalLength) //
if (this.nowLength <= this.totalLength) {
this.$http.jsonp('http://json.cn/json.php',
{
params:{},
jsonp:'callback'
}).then(function(res){ if(this.nowLength+this.num<this.totalLength){
this.nextLength=this.nowLength+this.num
}else{
this.nextLength=this.totalLength
} for(let i=this.nowLength; i<this.nextLength; i++){
this.list.push(res.data.s[i] + i)
} this.nowLength+=this.num;
},function(res){
console.log(res.status);
}) } else {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
}, );
}
}, created() {
this.$http.jsonp('http://json.cn/json.php',
{
params:{},
jsonp:'callback'
}
).then(function(res){ //如果成功
for(let i=; i<this.num; i++){
this.list.push(res.data.s[i] + i) //将10条数据推入this.list
}
this.nowLength = this.list.length; //nowLength=10
this.totalLength = res.data.s.length; //所有数据的长度29
},function(res){ //如果失败
console.log(res.status);
})
}, mounted() { //wrapperHeight=可见区域高度-wrapper到视窗的顶部
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
}
}
</script> <style lang="less" scoped>
.page-loadmore-wrapper {
overflow: scroll;
} .page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #eee;
} .page-loadmore-listitem:first-child {
border-top: 1px solid #eee
} .mint-loadmore-bottom span {
display: inline-block;
-webkit-transition: .2s linear;
transition: .2s linear;
vertical-align: middle
} .mint-loadmore-bottom span.is-rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
</style>

参考:https://www.cnblogs.com/yuri2016/p/7045709.html

vue2 mint-ui loadmore(下拉刷新)的更多相关文章

  1. vue2 mint-ui loadmore(下拉刷新,上拉更多)

    <template> <div class="page-loadmore"> <h1 class="page-title"> ...

  2. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  3. vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

  4. Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...

  5. vue---mint-ui组件loadmore(上拉加载,下拉刷新)

    1. 先安装mint-ui 2. 在main.js中引入mint-ui的css样式和组件 import "mint-ui/lib/style.css"; import {Loadm ...

  6. vue2.0 自定义 下拉刷新和上拉加载更多(Scroller) 组件

    1.下拉刷新和上拉加载更多组件 Scroller.vue <!-- 下拉刷新 上拉加载更多 组件 --> <template> <div :style="mar ...

  7. vue2.0 移动端,下拉刷新,上拉加载更多 封装组件

    前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...

  8. vue和mint-ui loadMore 实现上拉加载和下拉刷新

    首先安装mint-ui组件库 npm install mint-ui 在main.js中引入mint-ui和样式 import 'mint-ui/lib/style.css' import MintU ...

  9. Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...

随机推荐

  1. Oracle 11g实时SQL监控 v$sql_monitor

    Oracle 11g实时SQL监控: 前面提到,在Oracle Database 11g中,v$session视图增加了一些新的字段,这其中包括SQL_EXEC_START和SQL_EXEC_ID, ...

  2. SSH远程SOLARIS11时被拒绝

    在虚拟机中新安装的solaris11,安装过程中配置了静态IP地址用以方便ssh连接,使用root用户ssh连接时,密码没有错,但总是提示密码被拒绝,连接established 代表是通的,telne ...

  3. PyCharm 中使用 Pylint 控制代码质量

    1) Pylint安装 - Windows下: 直接在 cmd 下使用 pip install pylint 即可(如果 pip 不可用,首先安装最新版 Python,会默认安装 pip,或者找到 p ...

  4. 深入理解 Getter和Setter 对对象的属性监听

    阅读目录 一:理解普通对象在声明时添加 get.set 二:Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__ ...

  5. gooderp安装

    在做ODOO的前提下需要PostgreSQL,  SO.... #!/bin/bashPID=`echo $$`echo -e "\033[35m该脚本只在CentOS 7.4.1708版本 ...

  6. JavaEE学习之JAXB

    一.前言 JAXB——Java Architecture for XML Binding,是一项可以根据XML Schema产生Java类的技术.JAXB提供将XML实例文档反向生成Java对象树的方 ...

  7. 强大的开源企业级数据监控利器Lepus安装与配置管理

    开篇介绍 官方网站:http://www.lepus.cc 开源企业级数据库监控系统 简洁.直观.强大的开源数据库监控系统,MySQL/Oracle/MongoDB/Redis一站式性能监控,让数据库 ...

  8. 四、xadmin自定义插件1

    插件原理: Xadmin中每个页面都是一个AdminView对象返回的HTTPResponse结果. Xdamin插件所做的事情就是其实就是在AdminView执行过程中改变其执行逻辑或是改变其返回的 ...

  9. Python_复习_34

    +# 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱), ...

  10. StanfordPOSTagger的用法

    或者: 然后, 由说明文档可知,nltk.tag.stanford module是与斯坦福标识符交互的模块.要到https://nlp.stanford.edu/software下载Tagger mo ...