欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 测试上述代码运行效果。