vue移动端下拉刷新和上滑加载


Posted in Javascript onOctober 27, 2020

本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码,供大家参考,具体内容如下

组件

<template>
 <div class="mu-load-more"
  @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
 <div class="mu-refresh-control" v-if="!isNaN(top) && top !== 0" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
  <svg-icon icon-class="gengxin" class="mu-refresh-svg-icon" v-if="state === 0 || state === 1" :style="{ transform: 'rotate(' + (top * 2) + 'deg)' }"></svg-icon>
 </div>
 <div class="mu-refresh-control son" v-if="state === 2" :style="{ 'margin-top': marginTop + 'px' }">
  <svg-icon icon-class="jianchagengxin" class="mu-refresh-svg-icon refresh" v-if="state === 2"></svg-icon>
 </div>
 <slot></slot>
 </div>
</template>

<script>
export default {
 props: {
  offset: {
   type: Number,
   default: 40
  },
  enableInfinite: {
   type: Boolean,
   default: true
  },
  enableRefresh: {
   type: Boolean,
   default: true
  },
  onRefresh: {
   type: Function,
   default: undefined,
   required: false
  },
  onInfinite: {
   type: Function,
   default: undefined,
   require: false
  }
 },
 data() {
  return {
   top: 0,
   state: 0,
   // 开始滑动时,y轴位置
   startY: 0,
   startScroll: 0,
   touching: false,
   infiniteLoading: false,
   refreshShow: true,
   infiniteState: true,
   showLoad: false,
   marginTop: 0
  }
 },
 created(){
  if(this.enableRefresh === false) {
   this.refreshShow = false
  }
  window.addEventListener('scroll', this.onScroll)
 },
 destroyed () {
  window.removeEventListener('scroll', this.onScroll)
 },
 methods: {
  // 触摸开始(手指放在触摸屏上) 
  touchStart(e) {
   if(window.pageYOffset > 0) return
   if(!this.enableRefresh) return
   this.startY = e.targetTouches[0].pageY
   this.startScroll = this.$el.scrollTop || 0
   //开启滑动记录
   this.touching = true
  },
  // 拖动(手指在触摸屏上移动)
  touchMove(e) {
   // 这里控制是否可以上下拉  代表正在滑动 
   if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
    return
   }
   // 获取拉取的间隔差  当前移动的y点   初始的y点    初始顶部距离
   let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
   //如果是往上滑的话,就取消事件
   if (diff > 0) e.preventDefault()
   // 对状态进行处理,看是否处于刷新中
   this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)

   if (this.state === 2) { // in refreshing
    return
   }
   if (this.top >= this.offset) {
    this.state = 1
   } else {
    this.state = 0
   }
  },
  // 触摸结束(手指从触摸屏上移开)
  touchEnd() {
   if (!this.enableRefresh) return
   this.touching = false
   if (this.state === 2) {
    this.state = 2
    this.top = 0
    return
   }
   if (this.top >= this.offset) {
    this.refresh()
   } else {
    this.state = 0
    this.top = 0
   }
  },
  refresh() {
   this.marginTop = this.top
   this.state = 2
   this.top = 0
   this.onRefresh(this.refreshDone)
  },
  refreshDone() {
   this.state = 0
   this.top = 0
   this.marginTop = 0
  },
  infinite() {
   this.infiniteLoading = true
   this.onInfinite(this.infiniteDone)
  },
  infiniteDone(length) {
   const self = this 
   if(length === 0) {
    self.infiniteState = false
   }
   this.showLoad = false
   self.infiniteLoading = false 
  },
  onScroll() {
   if (this.onInfinite) {
    let scrollTop = this.getScrollTop()
    let scrollHeight = this.getScrollHeight()
    let windowHeight = this.getWindowHeight()
    if (scrollTop + windowHeight === scrollHeight) {
     this.showLoad = true
     this.infinite()
    }
   }
  },
  // 滚动条在Y轴上的滚动距离
  getScrollTop() {
   var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0
   if (document.body) {
    bodyScrollTop = document.body.scrollTop
   }
   if (document.documentElement) {
    documentScrollTop = document.documentElement.scrollTop
   }
   scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
   return scrollTop
  },
  // 文档的总高度
  getScrollHeight() {
   var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0
   if (document.body) {
    bodyScrollHeight = document.body.scrollHeight;
   }
   if (document.documentElement) {
    documentScrollHeight = document.documentElement.scrollHeight;
   }
   scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
   return scrollHeight
  },
  // 浏览器视口的高度
  getWindowHeight() {
   var windowHeight = 0
   if (document.compatMode === 'CSS1Compat') {
    windowHeight = document.documentElement.clientHeight
   } else {
    windowHeight = document.body.clientHeight
   }
   return windowHeight
  }
 }
}
</script>

<style lang="scss" scoped>
.mu-load-more {
 position: relative;
 overflow: hidden;
}
.mu-refresh-control {
 display: flex;
 margin: 0 auto;
 width: 80px;
 height: 80px;
 color: #2196f3;
 align-items: center;
 justify-content: center;
 background-color: #FFF;
 border-radius: 50%;
 -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 position: absolute;
 left: 50%;
 margin-left: -38px;
 margin-top: 24px;
 z-index: 90;
}
.mu-refresh-svg-icon {
 display: inline-block;
 width: 20px;
 height: 20px;
 fill: currentColor;
}
.refresh {
 -webkit-transform: rotate(360deg);
 animation: rotation 1s linear infinite;
 -moz-animation: rotation 1s linear infinite;
 -webkit-animation: rotation 1s linear infinite;
 -o-animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
.son {
 position: absolute;
 animation: lightAni 1s linear 1;
}
@keyframes lightAni {
 0% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-50px);
 }
 100% {
  transform: translateY(-100px);
 }
}
</style>

应用组件

<scrollRefresh :on-refresh="refresh" :on-infinite="load">
 <!-- 页面内容 -->
</scrollRefresh>
<script>
// 引入组件
import scrollRefresh from '@/components/scrollRefresh'
export default {
 components: {
   scrollRefresh
  }
}
</script>
  • refresh 下拉刷新时调用的方法
  • load 上滑加载时调用的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
javascript cookies操作集合
Apr 12 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JSONP基础知识详解
Mar 19 Javascript
js new Date()实例测试
Oct 31 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
js实现简易拖拽的示例
Oct 26 #Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
You might like
深入理解PHP原理之异常机制
2010/08/21 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
javascript 写类方式之二
2009/07/05 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
多版本Python共存的配置方法
2017/05/22 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
程序员求职信
2014/04/16 职场文书
绿色环保演讲稿
2014/05/10 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
python如何为list实现find方法
2022/05/30 Python
python数字图像处理:图像简单滤波
2022/06/28 Python