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 相关文章推荐
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
JavaScript 原型与原型链详情
Nov 02 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
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
php实现文章评论系统
2019/02/18 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
Vue修改项目启动端口号方法
2019/11/07 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python数据结构之图的应用示例
2018/05/11 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python文件和文件夹复制函数
2020/02/07 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python