vue2 mint-ui loadmore实现下拉刷新,上拉更多功能


Posted in Javascript onMarch 21, 2018

mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体代码如下所示:

<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实现下拉刷新,上拉更多功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
用js简单提供增删改查接口
May 12 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 #Javascript
详解PHP后期静态绑定分析与应用
Mar 21 #Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 #Javascript
用p5.js制作烟花特效的示例代码
Mar 21 #Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 #Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 #Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python数组并集交集补集代码实例
2020/02/18 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
英国自行车商店:AW Cycles
2021/02/24 全球购物
关于VPN
2012/06/10 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
见习期自我鉴定
2013/11/07 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
六一节目主持词
2014/04/01 职场文书
社区文化建设方案
2014/05/02 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
婚宴父亲致辞
2015/07/27 职场文书