mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Nice pull to refresh behavior
This commit is contained in:
24
dist/js/ionic.js
vendored
24
dist/js/ionic.js
vendored
@ -2406,21 +2406,29 @@ window.ionic = {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.x = scrollLeft;
|
||||||
|
this.y = scrollTop;
|
||||||
|
|
||||||
// Grab the refresher element if using Pull to Refresh
|
// Grab the refresher element if using Pull to Refresh
|
||||||
if(this.hasPullToRefresh) {
|
if(this.hasPullToRefresh) {
|
||||||
this._refresher = document.querySelector('.scroll-refresher');
|
this._refresher = document.querySelector('.scroll-refresher');
|
||||||
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
|
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
|
||||||
// We always start the refresher hidden
|
// We always start the refresher hidden
|
||||||
this._isRefresherHidden = true;
|
if(this.y < 0) {
|
||||||
|
this._isRefresherHidden = true;
|
||||||
|
this._refresher.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
this._isRefresherHidden = false;
|
||||||
|
this._refresher.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
this._isHoldingRefresh = false;
|
||||||
|
|
||||||
if(this._refresher) {
|
if(this._refresher) {
|
||||||
this._refresher.classList.remove('scroll-refreshing');
|
this._refresher.classList.remove('scroll-refreshing');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = scrollLeft;
|
|
||||||
this.y = scrollTop;
|
|
||||||
|
|
||||||
this._drag = {
|
this._drag = {
|
||||||
direction: 'v',
|
direction: 'v',
|
||||||
pointX: e.gesture.touches[0].pageX,
|
pointX: e.gesture.touches[0].pageX,
|
||||||
@ -2530,6 +2538,14 @@ window.ionic = {
|
|||||||
// Update the new translated Y point of the container
|
// Update the new translated Y point of the container
|
||||||
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
_this._isHoldingRefresh = false;
|
||||||
|
|
||||||
|
// Hide the refresher
|
||||||
|
if(_this.refresher && !_this._isRefresherHidden) {
|
||||||
|
_this._refresher.style.display = 'none';
|
||||||
|
_this._isRefresherHidden = true;
|
||||||
|
}
|
||||||
// Update the new translated Y point of the container
|
// Update the new translated Y point of the container
|
||||||
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -497,21 +497,29 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.x = scrollLeft;
|
||||||
|
this.y = scrollTop;
|
||||||
|
|
||||||
// Grab the refresher element if using Pull to Refresh
|
// Grab the refresher element if using Pull to Refresh
|
||||||
if(this.hasPullToRefresh) {
|
if(this.hasPullToRefresh) {
|
||||||
this._refresher = document.querySelector('.scroll-refresher');
|
this._refresher = document.querySelector('.scroll-refresher');
|
||||||
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
|
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
|
||||||
// We always start the refresher hidden
|
// We always start the refresher hidden
|
||||||
this._isRefresherHidden = true;
|
if(this.y < 0) {
|
||||||
|
this._isRefresherHidden = true;
|
||||||
|
this._refresher.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
this._isRefresherHidden = false;
|
||||||
|
this._refresher.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
this._isHoldingRefresh = false;
|
||||||
|
|
||||||
if(this._refresher) {
|
if(this._refresher) {
|
||||||
this._refresher.classList.remove('scroll-refreshing');
|
this._refresher.classList.remove('scroll-refreshing');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.x = scrollLeft;
|
|
||||||
this.y = scrollTop;
|
|
||||||
|
|
||||||
this._drag = {
|
this._drag = {
|
||||||
direction: 'v',
|
direction: 'v',
|
||||||
pointX: e.gesture.touches[0].pageX,
|
pointX: e.gesture.touches[0].pageX,
|
||||||
@ -621,6 +629,14 @@
|
|||||||
// Update the new translated Y point of the container
|
// Update the new translated Y point of the container
|
||||||
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
_this._isHoldingRefresh = false;
|
||||||
|
|
||||||
|
// Hide the refresher
|
||||||
|
if(_this.refresher && !_this._isRefresherHidden) {
|
||||||
|
_this._refresher.style.display = 'none';
|
||||||
|
_this._isRefresherHidden = true;
|
||||||
|
}
|
||||||
// Update the new translated Y point of the container
|
// Update the new translated Y point of the container
|
||||||
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user