IScroll的那些事內容不足時下拉重新整理

之前專案中的列表是採用的iscroll，但是在使用iscroll有乙個問題就是：當內容不足全屏的時候，是木有辦法往下拉的，這樣就達不到重新整理的目的了。【這是本人工作中遇到的，具體例子具體分析，這裡只作乙個參考】

大致的例子是這樣的：

那麼，既然超過一屏是可以重新整理的，那我們就來逛逛**吧。在github上搜尋iscroll，開啟第乙個，找到src下面的core.js。

1. 思路

首先既然要下拉，肯定會觸發touchstart、touchmove以及touchend事件。搜尋touchmove，很好，在_initevents中的註冊了這個事件。

_initevents: function (remove)

};// 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)

var point = e.touches ? e.touches[ www.xinhuoyule88.com 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 ) else if ( absdisty >= absdistx + this.options.directionlockthreshold ) else

}if ( this.directionlocked == 'h' ) else if ( this.options.eventpassthrough == 'horizontal' )

deltay = 0;

} else if ( this.directionlocked == 'v' ) else if ( this.options.eventpassthrough == 'vertical' )

第乙個條件判斷只要是定義了這次滑動的方向是什麼。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中找到這樣幾行**：

var rect = utils.getrect(this.scroller);

/* replace start: refresh */

this.scrollerwidth = rect.width;

this.scrollerheight = rect.height;

/* replace end: refresh */

this.hashorizontalscroll = this.options.scrollx && this.maxscrollx < 0;

this.hasverticalscroll = this.options.scrolly && this.maxscrolly < 0;

2. 解決方案

針對以上問題，只要我們能夠使內部的滾動部分高度大於容器高度，那麼就能觸發滾動。

2.1 粗略做法

可以設定乙個min-height屬性為900px(900只是乙個示例，只要夠大就可以)，這樣就可以保證可以滑動。

2.2 精準做法

計算當前的容器高度，然後比容器高度多乙個畫素即可。

IScroll的那些事內容不足時下拉重新整理

IScroll那些事內容不足時下拉重新整理

remap的那些事

AfxWinMain的那些事

IScroll的那些事 內容不足時下拉重新整理

IScroll那些事 內容不足時下拉重新整理

remap的那些事

AfxWinMain的那些事

相關推薦

IScroll的那些事內容不足時下拉重新整理

IScroll那些事內容不足時下拉重新整理