<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. gcc 找不到 boot python 链接库的问题: /usr/bin/ld: cannot find -lboost_python

    问题: Ubuntu 14.04,gcc 4.8.4,以默认方式编译 boost 1.67 后,使用 Boost.Python 时,gcc 提示找不到 boost python 链接库. 方案: 查看 ...

  2. linux驱动编写之poll机制

    一.概念 1.poll情景描述 以按键驱动为例进行说明,用阻塞的方式打开按键驱动文件/dev/buttons,应用程序使用read()函数来读取按键的键值.这样做的效果是:如果有按键按下了,调用该re ...

  3. WPF保存包含Winform控件的XAML页面问题

    原文:WPF保存包含Winform控件的XAML页面问题 最近的工作中,用到了WPF调用Winform控件 但是在保存XAML页面的时候发现了问题,就是Winform页面黑黑的,没有任何渲染的波形曲线 ...

  4. Gradle构建工具从入门到精通(IDEA)

    1.Gradle安装 官网下载压缩包,然后解压,配置本地环境变量.主要有下面两个: GRADLE_HOME 是解压后的目录, GRADLE_USER_HOME 的作用是让其他程序检测到本地.gradl ...

  5. Linux、Windows如何进行性能监控与调优

    1.Linux命令行工具 推荐:CentOS 7 1.1 top命令 top命令的输出如下: top命令的输出可以分为两部分:前半部分是系统统计信息,后半部分是进程信息.在统计信息中, 第1行是任务队 ...

  6. NPOI生成excel并下载

    NPOI文件下载地址:http://npoi.codeplex.com/ 将文件直接引用至项目中即可,,,,, 虽然网上资料很多,但有可能并找不到自己想要的功能,今天闲的没事,所以就稍微整理了一个简单 ...

  7. 朱晔的互联网架构实践心得S2E2:写业务代码最容易掉的10种坑

    我承认,本文的标题有一点标题党,特别是写业务代码,大家因为没有足够重视一些细节最容易调的坑(侧重Java,当然,本文说的这些点很多是不限制于语言的). 1.客户端的使用 我们在使用Redis.Elas ...

  8. LeetCode 832. Flipping an Image

    Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...

  9. functools下的partial模块应用

    问题 你有一个被其他python代码使用的callable对象,可能是一个回调函数或者是一个处理器, 但是它的参数太多了,导致调用时出错. 解决方案 如果需要减少某个函数的参数个数,你可以使用 fun ...

  10. 泛函p121可分Hilbert空间都同构于l^2

    如何理解最后面两句话, L^2与l^2同构 L^2里面 有理系数多项式 是可数稠密子集 所以L^2可分 可分Hilbert空间都同构于 l^2 傅里叶级数是一个稠密的子集