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版)
Nov 19 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
微信小程序实现打卡日历功能
2020/09/21 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python遍历数组的方法小结
2015/04/30 Python
python妙用之编码的转换详解
2017/04/21 Python
pycharm远程调试openstack代码
2017/11/21 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
预备党员入党思想汇报
2014/01/04 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
主题团日活动总结
2014/06/25 职场文书
公司庆典主持词
2015/07/04 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript