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 相关文章推荐
json数据的列循环示例
Sep 06 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
实例教学如何写vue插件
Nov 30 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 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 生成饼图 三维饼图
2009/09/28 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP的PDO连接讲解
2019/01/24 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
个人简历自我评价范文
2014/02/04 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
财务科科长岗位职责
2014/03/10 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
机关搬迁方案
2014/05/18 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书