Pull-to-refersh support in iScroll5? #378
Comments
|
I'm working on pull to refresh for v5. I removed topOffset because I don't know yet which is the best way to support the pull to refresh. |
|
Thanks! |
|
👍 |
|
hi, maybe you like SimonWaldherr/PullToRefresh or SimonWaldherr/infinity.js. |
|
Nativ ptr is not compatible with android since you can't bounce outside boundaries. |
|
Sorry I mixed up with https://github.com/dantipa/pull-to-refresh-js |
|
i have no android device, but i will try it in the simulator. Maybe i can fix this problem. |
|
Related issue #510. |
|
Hello, any news on this great feature? Still using iScroll 4 because of that feature alone? |
|
I didn't have time to prepare a standalone demo... But I hope the following will help. I took the original iScroll-4 pull-to-refresh feature, and re-edited it to work with IScroll-5. Note: Hope this helps... |
|
OK, I figured out how your solution works. Can you please elaborate a bit more on this part: Do I need to create an extra method named 'load_content'? |
|
load_content is a method of mine that refreshes the list contents - injects some Ajax data into the scroller container - it either performs a "refresh" and replaces the existing scroll list, or loads a new page. You should replace the load_content with your own function that does the same. Let me know if that's understood :) |
|
thanks for the clarification - your resolution works like a charm - I'll try to create an example using your code and post it here |
|
NP :) |
|
Is there any way to combine this pull to refresh with the infinate scroll? |
|
Can't we use pull to refresh yet? |
|
Is there a plan to support pull to refresh in iscroll 5,or i have to modify the code by myself? |
|
something new? thank you very much |
|
As far as I know - until the next version which might support it - you'll need to add it to the code yourself. First - make sure you use iscroll-probe. Then, basically you have 3 functions that you need to understand: And then:
Hope that helps... |
|
thank you very much, that looks like a very good explanation. I will try it 2014-06-20 22:05 GMT+02:00 Oren Agiv [email protected]:
|
|
Would anyone be willing to leave a JS Fiddle to show this code in action? Thank you! |
|
I've prepared a demo - hope this helps: The DEMO includes both Pull to Refresh and "infinite" scroll (but not using the iscroll-infinite.js). |
|
Is pull-to-refresh still not supported in iScroll 5 now? |
|
This would still be an incredibly useful feature to have. I got the above example to work, but this breaks if there arent enough items to overflow the container. |
|
Hi folks, I've got an iScroll 5 compatible jqm widget that has had some testing done by me. At this point it has been setup as a Meteor project (just 'cuz I want to learn more about it). At this point its pretty raw but I am planning on using it with a jQuery Mobile Apache Cordova app I maintain so it will see the light of day. ;-) http://github.com/normanhh3/jqm-iscroll |
|
@normanhh3 why do you need a jQM widget when iScroll 5 works just fine by itself? |
|
It works by itself, I wanted a more native feel for jqm as well as handling of some of the peculiarities that make getting iscroll work in jqm easier. Implemented all of the code for handling the pull-to-refresh as well as manipulating the layout to work well within jqm was a bit of a challenge. I just wanted to keep as clean of a separation as possible for my own re-use. |
|
Hi. Thanks for getting back at me. What peculiarities though? I haven't found any peculiarities yet at my latest fiddle over at watusi/jquery-mobile-iscrollview#118. And it's simple too, just add As for pull to refesh, surely #510 is a lot simpler? Both in terms of code and the parties involved. |
|
@frankie-loves-jesus , I hadn't seen #510 until now. It is a good start at a basic solution, but lacks the finesse of the UI interaction provided by @orenagiv in his solution mentioned previously. I leaned heavily on his solution to craft my solution. |
|
I create a pull to refresh example but i have problems with scrollEnd and scrollTo, When i call scrollTo seems that scrollEnd fuck up and is calling a lot. I resolve a lot of consecutive animation problems with jquery .stop() and others that stop events on queue etc.. but here i dont know why scrollTo fuck me up the scrollEnd event. Example: http://jsfiddle.net/kL28ct7b/ Hope someone can fix this, the code is simple i think. |
|
There's a simple way using iscroll probe: |
|
Hello! It's based on the official demo for iScroll 4, and it should be quite polished and well-behaved (we plan to use it in production quite soon). It tries to handle all the the different cases without glitches (e.g. it works also when the content fits the screen and iScroll has disabled scrolling, the scrollbars are working in all cases, and I've tried to address all visual glitches, etc). It also supports multiple instances on the same page (just create one or more new IScrollPullUpDown() with different wrapper-IDs) Here's a demo if anyone's interested: |
|
@TobbeLino Hi, I tried to use your implementation. With the demo, everything works perfect.
I tried to set those two class in css with The following is my code, it will work perfectly if the ajax parts are replaced by the commented out parts. if (!refresh || (refresh && !next_page)) {
// Loading the initial content and refreshing
$('#wrapper > #scroller > ul').html('');
$.ajax({
url: 'service/data.json',
dataType: 'json',
})
.done(function(data) {
var content = "";
for (var i = 9; i >= 0; i--) {
content += ('<li>' + data.clientList[i] + 'aaaaaaaaaaaa</li>');
}
$('#wrapper > #scroller > ul').append(content);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
// var content = "";
// for (var i = 9; i >= 0; i--) {
// content += ('<li>' + i + 'aaaaaaaaaaaa</li>');
// }
// $('#wrapper > #scroller > ul').append(content);
} else if (refresh && next_page) {
// Loading the next-page content
$.ajax({
url: 'service/data.json',
dataType: 'json',
})
.done(function(data) {
var content = "";
for (var i = 9; i >= 0; i--) {
content += ('<li>' + data.clientList[i] + 'aaaaaaaaaaaa</li>');
}
$('#wrapper > #scroller > ul').append(content);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
// var content = "";
// for (var i = 9; i >= 0; i--) {
// content += ('<li>' + i + 'aaaaaaaaaaaa</li>');
// }
// $('#wrapper > #scroller > ul').append(content);
// $('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
} |
|
@Chener: Not sure, but didn't you just forget to call theScroller.refresh() after modifying the DOM in the ajax callback? You need to do that to make iScroll aware of the changes. |
|
@TobbeLino I do have this under the above code: if (refresh) {
myScroll.refresh();
pullActionCallback();
} else {
if (myScroll) {
myScroll.destroy();
$(myScroll.scroller).attr('style', ''); // Required since the styles applied by IScroll might conflict with transitions of parent layers.
myScroll = null;
}
trigger_myScroll();
} |
|
@Chener: It's a bit hard to help without seeing all of your code. What happens in pullActionCallback() and why do you call refreh() before (and not after)? And I really think you need a refresh()-call in the end of the ajax-callback on done(), as this is where the DOM is changes. I'm not using jQuery myself so I'm not sure - are the DOM-manipulation always done synchronously/instantly with .append() in jQuery? If there is any delay (due to transitins, etc), maybe you'll have to call myScroll.refresh() with a small delay, e.g.: |
|
@TobbeLino Sorry, I did not actually dig too much in iScroll, just copied the code from your demo, thought it would be ok just to replace the hard-coded parts. I will see into it, should be able to solve it under your pointing direction. Thank you! |
|
@TobbeLino Nailed it ! Thank you, and it seems that DOM-manipulation is done instantly. |
|
@TobbeLino great solution by the way, it really works. |
|
@TobbeLino amazingly done! I extracted the code from the demo here (uses iscroll-probe.js): And use like so Although it's better if you use tap instead of click, because click is triggered twice. Also, make sure to put some delay on refresh. Also, you must block scrolling on the page. As I said, all credit to TobbeLino. |
|
Any perfect solution? |
|
The one that TobbeLino created works without a problem if you get it to work. |
|
How about this？ |
|
Hey guys, I am a UI designer and now trying to implement the iscroll 5 pull to refresh in my hybrid mobile project. However, as I don't know javascript, I just really need a final packet of pull to refresh iscroll 5. Can anybody put a github link or anything that works well finally so I can directly download to implement it on my project. Thanks a lot in advance. |
Copy pasted without editing, you may need to initialize some variables |
|
If someone is interested, i just wrote a little react component to work with iscroll and pull refresh. var React = require('react');
var IScroll = require('iscroll/build/iscroll-probe');
var classnames = require('classnames');
var PullToRefresh = React.createClass({
getDefaultProps: function() {
return {
refreshText: 'Pull to refresh',
releaseText: 'Release to refresh',
loadingText: 'Loading',
refreshIconClass: 'fa fa-arrow-down',
releaseIconClass: 'fa fa-arrow-down fa-rotate-180',
loadingIconClass: 'fa fa-refresh fa-spin',
pullToRefreshThreshold: 100,
refreshThreshold: 50
};
},
getInitialState: function() {
return {
loading: false,
pulling: false,
waitingReleaseToRefresh: false
};
},
getScrollWrap: function() {
return this.refs.scroller;
},
componentDidMount: function() {
this.iscroll = new IScroll(this.getScrollWrap(), {
mouseWheel: true,
probeType: 3,
scrollbars: false
});
var me = this;
this.iscroll.on('scroll', function() {
me.scrollHandler(this)
});
this.getScrollWrap().addEventListener("touchend", this.handlePullRefresh, false);
},
componentDidUpdate: function() {
if (!this.state.pulling) {
this.iscroll.refresh();
}
},
handlePullRefresh: function() {
if (this.state.waitingReleaseToRefresh) {
this.showLoader();
this.props.onRefresh(this.hideLoader);
}
},
showLoader: function() {
this.setState({
waitingReleaseToRefresh: false,
loading: true
});
},
hideLoader: function() {
this.setState({
loading: false
});
},
scrollHandler: function(scroll) {
var state = this.state;
//normal scroll
if (scroll.y <= 1) {
state.pulling = false;
}
//we are pulling
if (scroll.y > 1) {
state.pulling = true;
if (this.props.pullToRefreshThreshold < scroll.y) {
console.log('REFRESH');
state.waitingReleaseToRefresh = true;
} else {
state.waitingReleaseToRefresh = false;
}
}
this.setState(state);
},
renderLoading: function() {
return (
<div className="loading">
<p>{this.props.loadingText}</p>
<div className="icon"><i className={this.props.loadingIconClass}></i></div>
</div>
);
},
renderRefresh: function() {
//prevent the block to be displayed if we are nit pulling
if (!this.state.pulling) {
return null;
}
var text = this.state.waitingReleaseToRefresh ? this.props.releaseText : this.props.refreshText;
var iconClass = this.state.waitingReleaseToRefresh ? this.props.releaseIconClass : this.props.refreshIconClass;
return (
<div className="refresh">
<p>{text}</p>
<div className="icon"><i className={iconClass}></i></div>
</div>
);
},
render: function() {
var classNames = classnames({
'pull-to-refresh': true,
'loading': this.state.loading,
'pulling': this.state.pulling,
'waiting-pull-to-refresh': this.state.waitingPullToRefresh
});
var scrollerStyle = {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
transition: 'all .2s ease-out',
transform: this.state.loading ? 'translate3d(0,' + this.props.refreshThreshold + 'px,0)' : 'translate3d(0,0,0)'
};
var refreshInfos = this.state.loading ? this.renderLoading() : this.renderRefresh();
return (
<div className={classNames}>
{refreshInfos}
<div ref="scroller" style={scrollerStyle}>
<div className="scroller" ref="scroller" style={scrollerStyle}>
{this.props.children}
</div>
</div>
</div>
);
}
});
module.exports = PullToRefresh;Usage: var React = require('react');
var PullToRefresh = require('../pulltorefresh/PullToRefresh');
var List = React.createClass({
onRefresh: function(done){
//fetch data here.
setTimeout(function(){
done();
}, 2000);
},
render: function() {
return (
<div>
<PullToRefresh onRefresh={this.onRefresh}>
{this.props.children}
</PullToRefresh>
</div>
);
}
});
module.exports = List; |
|
Could somebody put up a real live testcase at jsbin.com? |
|
Or will this be a feature of iScroll 6 @cubiq? Thank you. |
|
@dt1973, yes, it will) |
|
Any predictions for release iScroll 6 or to implement this feature? I'm using the solution of @TobbeLino, but scrollBy is causing a small delay on Android devices. |
and others
Hi!
There was topOffset option for pull-to-referesh in iScroll4. But I can't find it in iScroll5. Is it supported?
The text was updated successfully, but these errors were encountered: