IScroll那些事_当内容不足时下拉刷新的解决方法


Posted in Javascript onJuly 18, 2017

之前项目中的列表是采用的IScroll,但是在使用IScroll有一个问题就是:当内容不足全屏的时候,是木有办法往下拉的,这样就达不到刷新的目的了。【这是本人工作中遇到的,具体例子具体分析,这里只作一个参考】

大致的例子是这样的:

<style>
 * {
 margin: 0;
 padding: 0;
 }
 html,body,.container {
 width: 100%;
 height: 100%;
 }
 .container>ul>li {
 padding: 15px 20px;
 text-align: center;
 border-bottom: 1px solid #ccc;
 }
</style>

<div id="container" class="container">
 <ul class="scroller">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 </ul>
</div>

<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<script>
 var myScroll = null;
 function onLoad() {
 myScroll = new IScroll('container');
 }
 window.addEventListener('DOMContentLoaded', onLoad, false);
</script>

那么,既然超过一屏是可以刷新的,那我们就来逛逛代码吧。在github上搜索iscroll,打开第一个,找到src下面的core.js。

1. 思路

首先既然要下拉,肯定会触发touchstart、touchmove以及touchend事件。搜索touchmove,很好,在_initEvents中的注册了这个事件。

_initEvents: function (remove) {
 // ...
 // 这里省略若干代码

 if ( utils.hasTouch && !this.options.disableTouch ) {
  eventType(this.wrapper, 'touchstart', this);
  eventType(target, 'touchmove', this);
  eventType(target, 'touchcancel', this);
  eventType(target, 'touchend', this);
 }

 // ...
},

好吧,看到这里的时候,我表示懵了一下逼,这不就是个绑定事件么?this又是一个什么鬼,然后我去查了一下文档,发现了这么一个东西。文档地址

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); 
// 
// Gecko/Mozilla only

listener

当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数

木有看错,listener是一个对象或者是一个函数。前提是这个对象实现了EventListener接口。我们接着往下看,发现了这么一个例子。

var Something = function(element) {
 // |this| is a newly created object
 this.name = 'Something Good';
 this.handleEvent = function(event) {
 console.log(this.name); 
 // 'Something Good', as this is bound to newly created object
 switch(event.type) {
  case 'click':
  // some code here...
  break;
  case 'dblclick':
  // some code here...
  break;
 }
 };

 // Note that the listeners in this case are |this|, not this.handleEvent
 element.addEventListener('click', this, false);
 element.addEventListener('dblclick', this, false);

 // You can properly remove the listeners
 element.removeEventListener('click', this, false);
 element.removeEventListener('dblclick', this, false);
}
var s = new Something(document.body);

然后在去IScroll的源码去找,发现了同样的实现方式。在default文件夹中有一个handleEvent.js。

好了,这个梗先告一段落。还是继续看源码。在handleEvent.js中,有这么一段东西。

handleEvent: function (e) {
 switch ( e.type ) {
  case 'touchstart':
  case 'pointerdown':
  case 'MSPointerDown':
  case 'mousedown':
  this._start(e);
  break;
  case 'touchmove':
  case 'pointermove':
  case 'MSPointerMove':
  case 'mousemove':
  this._move(e);
  break;
  case 'touchend':
  case 'pointerup':
  case 'MSPointerUp':
  case 'mouseup':
  case 'touchcancel':
  case 'pointercancel':
  case 'MSPointerCancel':
  case 'mousecancel':
  this._end(e);
  break;
  // ...
 }
 }
};

发现在start/move/end分别调用了内部方法_start/_move/_end方法。去看看这三个方法,看其中可能会引起不会滑动的点。

在_start方法中,看到这样的几行代码,会不会是直接返回了呢?分析分析:

if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) {
 return;
}

// ...

var point = e.touches ? e.touches[0] : e,
 pos;

this.initiated = utils.eventType[e.type];
this.moved = false;
initiated属性在最开始肯定是没有的,而enabled默认是true,所以在最开始执行这个方法的时候是不会返回的,而是会给initiated这个属性设置当前的eventType值,这个值会在_move方法中用到。重点来看看_move方法。

if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
 return;
}

首先来进行类型判断,因为在_start方法中已经定义了这个值,所以这里也不会返回。接着往下看:

if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
 return;
}

【实际上是两次click事件的模拟】如果两次滑动的时间大于了300ms,并且只要一个方向上的位移少于10像素,那么也是会返回的。那么会不会呢,打个断点测试一下就知道了。这里就不贴图了,实际中的测试结果是,每一次移动肯定是在300ms以内的,这里之所以判断300ms,主要是click事件执行会有一个300ms的延迟。而每一次移动,由于手指的触点比较大,还是会大于10像素的,即使两次不大于10像素,也是不影响的。所以这点不会返回。那么继续接着看:

// If you are scrolling in one direction lock the other
if ( !this.directionLocked && !this.options.freeScroll ) {
 if ( absDistX > absDistY + this.options.directionLockThreshold ) {
 this.directionLocked = 'h'; // lock horizontally
 } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
 this.directionLocked = 'v'; // lock vertically
 } else {
 this.directionLocked = 'n'; // no lock
 }
}

if ( this.directionLocked == 'h' ) {
 if ( this.options.eventPassthrough == 'vertical' ) {
 e.preventDefault();
 } else if ( this.options.eventPassthrough == 'horizontal' ) {
 this.initiated = false;
 return;
 }

 deltaY = 0;
} else if ( this.directionLocked == 'v' ) {
 if ( this.options.eventPassthrough == 'horizontal' ) {
 e.preventDefault();
 } else if ( this.options.eventPassthrough == 'vertical' ) {
 this.initiated = false;
 return;
 }

 deltaX = 0;
}

第一个条件判断只要是定义了这次滑动的方向是什么。h表示水平方向,v表示竖直方向。我们是要向下滑动,所以我们关注的是竖直方向。看第二个条件判断,如果是竖直方向,那么将水平方向的deltaX值变为0。这样做的目的是保持绝对的竖直方向。因为移动实际还是根据元素的位移值来的。当probe的版本为2以下的时候,是根据css3的transform属性来移动位移的,为3版本的时候是根据决定对位来移动的。所以这里只要不把我们的deltaY置为0就说明木有什么问题。继续往下看代码:

deltaX = this.hasHorizontalScroll ? deltaX : 0;
deltaY = this.hasVerticalScroll ? deltaY : 0;

newX = this.x + deltaX;
newY = this.y + deltaY;
// ...

// 这里是移动
this._translate(newX, newY);

测试中发现,这个hasVerticalScroll一直是false,那么deltaY一直就是0,也就是移动了也白移动。找到问题原因。那么,这个hasVerticalScroll是从哪里来的?全局找呀找,在refresh中找到这样几行代码:

this.wrapperWidth = this.wrapper.clientWidth;
this.wrapperHeight = this.wrapper.clientHeight;

var rect = utils.getRect(this.scroller);
/* REPLACE START: refresh */

this.scrollerWidth = rect.width;
this.scrollerHeight = rect.height;

this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
this.maxScrollY = this.wrapperHeight - this.scrollerHeight;

/* REPLACE END: refresh */

this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0;
this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;

refresh方法会在IScroll实例化的时候调用一次。粗略一看,scrollY内置为true,所以只有maxScrollY会大于0。往上看。this.wrapperHeight - this.scrollerHeight肯定是大于0的呀,这就是问题所在。

那么看看我们最开始代码,这里的wrapperHeight为文档高度,scrollerHeight为内容高度,所以wrapperHeight高度始终大于scrollHeight。但是,手机端页面夹杂的列表,一般都有头部、底部,而中间部分一般都会采用padding的形式来使得列表在全局滚动,这样就不需要每次都要特定地计算列表的高度。

2. 解决方案

针对以上问题,只要我们能够使内部的滚动部分高度大于容器高度,那么就能触发滚动。

2.1 粗略做法

可以设置一个min-height属性为900px(900只是一个示例,只要够大就可以),这样就可以保证可以滑动。

2.2 精准做法

计算当前的容器高度,然后比容器高度多一个像素即可。

以上这篇IScroll那些事_当内容不足时下拉刷新的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 #Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 #Javascript
node.js中grunt和gulp的区别详解
Jul 17 #Javascript
js实现多张图片延迟加载效果
Jul 17 #Javascript
js指定步长实现单方向匀速运动
Jul 17 #Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
You might like
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
web前端开发也需要日志
2010/12/09 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
angular 服务随记小结
2019/05/06 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python搜索包的路径的实现方法
2019/07/19 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
小学节能减排倡议书
2014/05/15 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书