看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件

说这个功能之前,大家要先了解一下,要怎么触发滚动条事件。

一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样,

只要满足子元素宽度大于父元素宽度就可以了。(下篇文章会讲怎么实现一个横向滚动条)

接入正题!!!

先来看看怎么剖析这个下拉刷新。

要用到的移动端的三个事件: touchstart(手指按下),touchmove(手指移动),touchend(手指离开)

下拉刷新也就是(touchstart => touchmove(下移动) =>touchend)的一个过程

大体思路

下拉主要与手指触摸y轴点有关

1.记录下手指按下y轴的坐标点

2.记录手指移动时,移动的距离(注意:要判断手指是向上移还是向下移,向上移就是滚动)

3.启动下拉刷新事件

看代码:

  vue中要在methods里面注册事件,在绑定到父元素上,这里大家应该都是用vue-cli搭建的项目了吧!

没有的话,我回头给个链接给大家,里面有已经搭建好的项目结构。包含这个插件的源码,demo都在里面

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      top: 0,
      startY: 0, // 保存 y轴点的位置
      touching: false, // 代表当前是否处于 下拉刷新行为的开关,也就是当属于滚动行为时,就要退出该事件机制
    }  
  },
  methods: {
    touchStart(e) {
      // e代表该事件对象,
e.targetTouches[0].pageY可以拿到手指按下的 y轴点
      this.startY = e.targetTouches[0].pageY
      // 开启下拉刷新状态
      this.touching = true
      
    },
    touchMove(e) {
     //这个 touchMove,只要页面在动都会发生的,所以 touching就起作用了
      // 如果 touching为false,说明这个正在移动的页面不是我们想要的下拉刷新,有可能是用户随意拉了一下页面而已,或者其他
      if(!this.touching) return
      // 获取移动的距离
      let diff = e.targetToc=uches[0].pageY - this.startY
      //判断是向上拉还是向下拉
      if(diff >0) {
        e.preventDefault()
      } else {
        return   
      }
      //这个this.top要对应绑定到该元素的transform: translateY(+top+ 'px')上,不然是无法拉动的
      // 因此这里还要对偏移高度做一下处理,直接设置diff +
(this.state === 2 ? 40 : 0) 太快了,因为拉取幅度太大
      // 让diff*0.25这样子就差不多了
       this.top =
Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)
      if(this.top >= 40){
        this.state = 1 //代表正在拉取
      } else {
        this.state = 0 // 代表初始转态
      }
   
    },
    touchEnd(e) {
      this.touching = false
      if(this.state === 2) {
        this.top = 40
        return
      }
      // 判断抬起时的高度,是大于40 就开启刷新
      if(this.top >= 40) {
        this.refresh()
      } else {
        this.state = 0
        this.top = 0
      }
    },
    refresh() {
      this.state = 2
      this.top = 40
      const self = this
      // 这里可以调用父组件的方法去请求刷新接口
      this.$emit('getRefresh', function(self){
        //传个回调过去,请求完数据就复原
        self.state = 0
        self.top = 0
      })
    }
  } }
</script>

到这里就完结了,当然现在肯定不能直接用的,要结合你的实际业务逻辑来用的,

我把demo放到github上了 :

https://github.com/13725102796/css3-demo/blob/master/src/plugins/scroll/scroll.vue

看不懂的,建议整个项目拉下拉,跑一下,里面还有检验的插件,弹窗的等等,都是我在项目中用到,再抽出来的。

方法: git clone https://github.com/13725102796/css3-demo.git

同时,也欢迎各位提提 issues,或者各位想扩展一些其它的插件都可以。

最后,别忘了给个star!与君互勉,一起啃砖!

下一篇就讲怎么做这个滚动加载!!!

详解vue移动端 下拉刷新的更多相关文章

  1. vue移动端下拉刷新、上拉加载

    由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...

  2. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. html5实现移动端下拉刷新(原理和代码)

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  6. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  7. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  8. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  9. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

随机推荐

  1. js和jquery判断checkbox是否被选中

    js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...

  2. unittest自动化使用HTMLTestRunner的中文编码问题

    1.使用unittest自动化测试框架,使用HTMLTestRunner生成测试报告,中文乱码问题! 如图 2.解决方法: 第一步:先在自己的测试脚本中添加 import sys reload(sys ...

  3. C 连接mysql VC的步骤

    初学C,看到C 连接mysql的教程不是很多,遇到很多的问题,看过许多盟友的解决方法,有点模糊(对我这个菜鸟来说),下面贴出具体步骤,一起学习: 1.C连接mysql的方法:C ,C ++ ,ODBC ...

  4. 『练手』通过注册表 获取 VS 和 SQLServer 文件路径

    获取任意 VS 和 SQLServer 的 磁盘安装目录. 背景需求:如果磁盘电脑安装了 VS 或者 SQLServer 则 认定这台计算机 的使用者 是一名 软件研发人员,则让程序 以最高权限运行. ...

  5. Java连接mysql——Establishing SSL connection without server's identity verification is not recommended.

    Establishing SSL connection without server's identity verification is not recommended. 出现这个错误的原因是因为m ...

  6. C语言博客作业—结构体

    一.PTA实验作业 题目1:结构体数组按总分排序 1. 本题PTA提交列表 2. 设计思路 void calc //函数calc求出p指针所指的结构体数组中 n 名学生各自的总分 { 定义循环变量i: ...

  7. Python处理图片缩略图

    CPU 密集型任务和 IO 密集型任务分别选择多进程multiprocessing.Pool.map 和多线程库multiprocessing.dummy.Pool.map import os imp ...

  8. Python实现栈

    栈的操作 Stack() 创建一个新的空栈 push(item) 添加一个新的元素item到栈顶 pop() 弹出栈顶元素 peek() 返回栈顶元素 is_empty() 判断栈是否为空 size( ...

  9. HAOI 2012 高速公路

    https://www.luogu.org/problem/show?pid=2221 题目描述 Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这 ...

  10. Mongodb 3 查询优化(慢查询Profiling)

    开启慢查询Profiling Profiling级别说明 0:关闭,不收集任何数据. 1:收集慢查询数据,默认是100毫秒. 2:收集所有数据 1.通过修改配置文件开启Profiling 修改启动mo ...