jQuery实现的上拉刷新功能组件示例

程序员文章站 2022-05-12 11:51:38

本文实例讲述了jquery实现的上拉刷新功能组件。分享给大家供大家参考，具体如下：技术要点：1、jquery的插件写法2、上拉刷新步骤分解3、css样式jquery的插件写法：$.fn.pluginn...

本文实例讲述了jquery实现的上拉刷新功能组件。分享给大家供大家参考，具体如下：

技术要点：

1、jquery的插件写法

2、上拉刷新步骤分解

3、css样式

jquery的插件写法：

$.fn.pluginname = function() {
  return this.each(function () {
    fn();
  })
};

上拉刷新步骤分解：

上拉刷新可以分解成三个部分：一是开始（start），记录当前鼠标的位置；二是移动（move），根据下拉的位移响应不同的视图；三是结束（end），刷新页面。

;!function ($) {
  "use strict";
  var ptr = function (ele) {
    this.container = $(ele);
    this.container.addclass('pull-to-refresh');
    this.distance = 60; // 设置参考的下拉位移
    this.attachevent();
  };
  // 判断是否有touch事件发生
  var istouch = (function () {
    var issupporttouch = !!'ontouchstart' in document || window.documenttouch;
    return issupporttouch;
  })();
  var touchevents = {
    start: istouch ? 'touchstart': 'mousedown',
    move: istouch ? 'touchmove':'mousemove',
    end: istouch ? 'touchend': 'mouseup'
  };
  // 获取事件发生时相对于文档的距离（含滚动距离）
  function gettouchposition(e) {
     var e = e.orinalevent || e;
     console.log(e)
     if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') {
       return {
         x: e.targettouches[0].pagex,
         y: e.targettouches[0].pagey
       }
     }else {
       return {
         x: e.pagex,
         y: e.pagey
       }
     }
  };
  ptr.prototype.touchstart = function (e) {
    var p = gettouchposition(e);
    this.start = p;
    this.diffx = this.diffy = 0;
  };
  ptr.prototype.touchmove = function (e) {
    if(this.container.hasclass('refreshing')) return;
    if(!this.start) return false;
    var p = gettouchposition(e);
    this.diffx = p.x - this.start.x;
    this.diffy = p.y - this.start.y;
    if(this.diffy < 0) return;
    this.container.addclass('touching');
    e.preventdefault();
    e.stoppropagation();
    // 设置container的位移小于页面滚动的距离，给人一种用力下拉的错觉，提升用户体验
    this.diffy = math.pow(this.diffy, .8);
    this.container.css('transform', 'translate3d(0,'+ this.diffy +'px, 0)');
    if(this.diffy < this.distance) {
      this.container.removeclass('pull-up').addclass('pull-down')
    }else {
      this.container.removeclass('pull-down').addclass('pull-up')
    }
  };
  ptr.prototype.touchend = function (e) {
    var _this = this;
    this.start = false;
    this.container.removeclass('pull-down');
    this.container.removeclass('pull-up');
    this.container.removeclass('touching');
    this.container.css('transform','');
    if(this.diffy >= this.distance) {
      this.container.addclass('refreshing');
      this.container.trigger('pull-to-refresh')
    }
  };
  // 事件处理程序，通过$.proxy(fn, content)绑定执行函数的上下文。
  ptr.prototype.attachevent = function () {
    var ele = this.container;
    ele.on(touchevents.start, $.proxy(this.touchstart, this));
    ele.on(touchevents.move, $.proxy(this.touchmove, this));
    ele.on(touchevents.end, $.proxy(this.touchend, this));
  };
  // 实例化构造函数
  var pulltorefresh = function (ele) {
    new ptr(ele)
  };
  var pulltorefreshdone = function (ele) {
    $(ele).removeclass('refreshing');
  };
  // jquery 插件编写的一般模式
  $.fn.pulltorefresh = function () {
    // return 是插件可链式调用
    // this 在这里是一个jquery对象，相当于$(ele)。因为在即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jquery对象中，因为this本身已经是被包装好的jquery对象。
    // this.each()使插件代码为多元素集合中的每个元素单独起作用
    return this.each(function () {
      pulltorefresh(this);
    })
  };
  $.fn.pulltorefreshdone = function () {
    return this.each(function () {
      pulltorefreshdone(this);
    })
  }

}(window.jquery);

html代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="pull-to-refresh.css" rel="external nofollow" >
  <style>
    p {
      margin-top: 0;
    }
  </style>
</head>
<body>
<div class="pull-to-refresh_layer">
  <div class="pull-to-refresh-arrow">↓</div>
  <div class="pull-to-refresh-preloader"></div>
  <div class="down">下拉刷新</div>
  <div class="up">释放刷新</div>
  <div class="refresh">正在刷新</div>
</div>
<div>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>
  <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusamus amet aperiam, architecto at aut
    beatae dignissimos eaque est ex fugi
    at incidunt inventore natus nemo nostru
    m omnis quos repellat ut voluptas!
  </p>

</div>
<script src="../jquery-1.8.3.min.js"></script>
<script src="pull-to-refresh.js"></script>
<script>
  $(function () {
    $(document.body).pulltorefresh().on('pull-to-refresh', function () {
      settimeout(function () {
        $(document.body).pulltorefreshdone();
      }, 2000)
    });
  })
</script>
</body>
</html>

css代码如下：

.pull-to-refresh {
  margin-top: -50px;
  transition: transform .4s;
}
.pull-to-refresh .pull-to-refresh-preloader,
.pull-to-refresh .up,
.pull-to-refresh .refresh {
  display: none;
}
.pull-to-refresh.refreshing {
  transform: translate3d(0,50px,0);
}

.refreshing .pull-to-refresh-arrow,
.refreshing .down,
.refreshing .up {
  display: none;
}
.refreshing .refresh,
.refreshing .pull-to-refresh-preloader {
  display: inline-block;
}
.pull-to-refresh_layer {
  height: 30px;
  line-height: 30px;
  padding-bottom: 10px;
}
.pull-down .pull-to-refresh_layer .up,
.pull-down .pull-to-refresh_layer .refresh {
  display: none;
}
.pull-down .pull-to-refresh_layer .down{
  display: inline-block;
}
.pull-up .pull-to-refresh_layer .up{
  display: inline-block;
}

.pull-up .pull-to-refresh_layer .down,
.pull-up .pull-to-refresh_layer .refresh {
  display: none;
}

.pull-up .pull-to-refresh-arrow {
  transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-to-refresh-arrow {
  display: inline-block;
  z-index: 10;
  margin-right: 4px;
  transition-duration: 300ms;
  transform: rotate(0deg) translate3d(0, 0, 0);
}

.pull-to-refresh_layer {
  display: inline-block;
}
.pull-to-refresh-preloader {
  display: inline-block;
}
.pull-down {

}
.pull-up {

}
.down {
  display: inline-block;
}
.up {
  display: inline-block;
}
.refresh {
  display: inline-block;
}

感兴趣的朋友可以使用在线html/css/javascript代码运行工具 http://tools.jb51.net/code/htmljsrun 测试上述代码运行效果。

上一篇： Mysql InnoDB引擎的索引与存储结构详解

下一篇：数据库查询优化之子查询优化

jQuery实现的上拉刷新功能组件示例

微信小程序实现页面下拉刷新和上拉加载功能详解

基于jquery实现的tab选项卡功能示例【附源码下载】

jQuery+vue.js实现的多选下拉列表功能示例

jQuery实现的中英文切换功能示例

vue移动端下拉刷新和上拉加载的实现代码

Vue实现的父组件向子组件传值功能示例

bootstrap+jQuery实现的动态进度条功能示例

微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

jQuery实现的点击图片居中放大缩小功能示例

jQuery实现的简单排序功能示例【冒泡排序】