<template>
<div class="page-loadmore">
<h1 class="page-title">Pull up</h1>
<p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p>
<p class="page-loadmore-desc">translate : {{ translate }}</p>
<div class="loading-background" :style="{ transform: 'scale3d(' + moveTranslate + ',' + moveTranslate + ',1)' }">
translateScale : {{ moveTranslate }}
</div> <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore"> <ul class="page-loadmore-list">
<li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
</ul> <div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div> <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> <style> .loading-background, .mint-loadmore-top span {
-webkit-transition: .2s linear;
transition: .2s linear
}
.mint-loadmore-top span {
display: inline-block;
vertical-align: middle
} .mint-loadmore-top span.is-rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
} .page-loadmore .mint-spinner {
display: inline-block;
vertical-align: middle
} .page-loadmore-desc {
text-align: center;
color: #666;
padding-bottom: 5px
} .page-loadmore-desc:last-of-type,
.page-loadmore-listitem {
border-bottom: 1px solid #eee
} .page-loadmore-listitem {
height: 50px;
line-height: 50px;
text-align: center
} .page-loadmore-listitem:first-child {
border-top: 1px solid #eee
} .page-loadmore-wrapper {
overflow: scroll
} .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> <script type="text/babel">
export default {
data() {
return {
list: [],
allLoaded: false, bottomStatus: '',
wrapperHeight: 0, topStatus: '',
//wrapperHeight: 0,
translate: 0,
moveTranslate: 0 };
}, methods: {
handleBottomChange(status) {
this.bottomStatus = status;
}, loadBottom() {
setTimeout(() => {
let lastValue = this.list[this.list.length - 1];
if (lastValue < 40) {
for (let i = 1; i <= 10; i++) {
this.list.push(lastValue + i);
}
} else {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
}, 1500);
}, handleTopChange(status) {
this.moveTranslate = 1;
this.topStatus = status;
},
translateChange(translate) {
const translateNum = +translate;
this.translate = translateNum.toFixed(2);
this.moveTranslate = (1 + translateNum / 70).toFixed(2);
},
loadTop() {
setTimeout(() => {
let firstValue = this.list[0];
for (let i = 1; i <= 10; i++) {
this.list.unshift(firstValue - i);
}
this.$refs.loadmore.onTopLoaded();
}, 1500);
}, }, created() {
for (let i = 1; i <= 20; i++) {
this.list.push(i);
}
}, mounted() {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
}
};
</script>

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

  1. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  2. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  3. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  4. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  5. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  6. react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)

    react-native-page-listview 对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View.兼容高版本Flat ...

  7. js 前端实现下拉刷新 上拉加载

    效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  10. ListView下拉刷新上拉加载更多实现

    这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...

随机推荐

  1. [HAOI 2010] 计数

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2425 [算法] 类似与数位动态规划的思想 , 用组合数学进行简单推导即可 时间复杂度 ...

  2. Jmeter 施压 SQL server数据库的时候,如何设置?

    1. 在应用Jmeter进行施压之前,有个重要的端口需要手动查找出来.该端口在第三部要使用.开始——程序——microsoft SQL Server 2008R2——配置工具——SQL Server ...

  3. python BaseManager分布式学习

    如果我们已经有一个通过Queue通信的多进程程序在同一台机器上运行,现在,由于处理任务的进程任务繁重,希望把发送任务的进程和处理任务的进程分布到两台机器上.怎么用分布式进程实现?原有的Queue可以继 ...

  4. bzoj 2194 快速傅立叶之二 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2194 如果把 a 序列翻转,则卷积得到的是 c[n-i],再把得到的 c 序列翻转即可. 代 ...

  5. 【旧文章搬运】深入分析Win7的对象引用跟踪机制

    原文发表于百度空间及看雪论坛,2010-09-12 看雪论坛地址:https://bbs.pediy.com/thread-120296.htm============================ ...

  6. MVC 登录后重定向回最初请求的 URL FormsAuthentication.RedirectFromLoginPage

    在传统的Asp.net webForm 中如果使用 Form身份验证.登录后重定向到最初请求的页面只需使用 FormsAuthentication.RedirectFromLoginPage 但在MV ...

  7. 关于数组array的一些误区

    $arr1 = array(1,2,3,4); $arr2 = array(5,6,7,8,9,10); var_dump ( $arr1 + $arr2);    //输出数组形式的(1,2,3,4 ...

  8. GitHub---github入门

    setup git --- create a repository-----fork a repository -- a pull request (be social)

  9. 使用BFG清除git仓库中的隐私文件或大文件

    使用git时间不长,在调机械臂项目的时候,由于对TwinCAT3和vs的机制不太了解,没有添加很好的忽略文件(.gitignore).造成git仓库包含了很多没有用的文件,例如vs的sdf文件,Twi ...

  10. 微信小程序开发之页面数据绑定

    js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",   ...