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 相关文章推荐
页面装载js及性能分析方法介绍
Mar 21 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
原生JavaScript实现随机点名表
Jan 14 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python中count函数简单用法
2020/01/05 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
广告学专业推荐信范文
2013/11/23 职场文书
写自荐信的注意事项
2014/03/09 职场文书
服务质量承诺书
2014/03/27 职场文书
社区矫正工作方案
2014/06/04 职场文书
大学军训口号大全
2015/12/24 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js