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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
JS数组的高级使用方法示例小结
Mar 14 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
3.从实例开始
2006/10/09 PHP
php代码优化及php相关问题总结
2006/10/09 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
php Static关键字实用方法
2010/06/04 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python getopt模块使用实例解析
2019/12/18 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
养成教育经验材料
2014/05/26 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
个人年终总结结尾
2015/03/06 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
golang http使用踩过的坑与填坑指南
2021/04/27 Golang