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 封装Ajax传递的数据代码
Jun 05 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
实例浅析js的this
Dec 11 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
javascript实现支付宝滑块验证码效果
Jul 24 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和Java的des加密解密代码分享
2014/06/26 PHP
19个Android常用工具类汇总
2014/12/30 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery密码强度校验
2015/12/02 Javascript
JavaScript模拟push
2016/03/06 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue cli 全面解析
2018/02/28 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
介绍下java.util.Arrays类
2012/10/16 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
部队领导证婚词
2014/01/12 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2015年度物流工作总结
2015/04/30 职场文书
校园音乐节目广播稿
2015/08/19 职场文书