apeatling / web-pull-to-refresh Goto Github PK
View Code? Open in Web Editor NEWA native-like JavaScript pull to refresh implementation for the web.
Home Page: https://apeatling.com/articles/javascript-pull-to-refresh-web/
License: MIT License
A native-like JavaScript pull to refresh implementation for the web.
Home Page: https://apeatling.com/articles/javascript-pull-to-refresh-web/
License: MIT License
Please consider publishing this library on Bower so managing it's version and dependencies is easier ;)
Works a treat in Chrome on my desktop, but in testing on Windows Phone, this doesn't work, any ideas why this might be? Happy to work with you to get this working.
I am not sure where do i change these, if i change the contentEI inside the wptr.1.1.js then the "animation" part stopped working.
{
// ID of the element holding dragable content area
contentEl: 'content',
// ID of the element holding pull to refresh loading area
ptrEl: 'ptr',
// Number of pixels of dragging down until refresh will fire
distanceToRefresh: 70,
// The dragging resistance level, the higher the more you'll need to drag down.
resistance: 2.5
}
Web-pull-to-refresh does not work in chrome browser for mobile after the recent update to version 55.0.X
Tried with Google Chrome Version 59.0.3071.86 (Official Build) (64-bit)
Tried with Android Web View version 58
It stuck on pull down. However it happens only when selects a touch device
http://pix.toile-libre.org/upload/original/1498626667.png
Hi,
I love the demo and it is works great! But when I am trying to integrate the code to my site, I found it is not working with the new version of the hammer js. (v2.0.4)
is it possible to work with the new version?
Plz advise.
thx.
Is there a pull-up-to-load way for this project?
android 4.0 devices do not support promises.
It would be nice to have a fallback
If you have a content element that extends past the bottom of the screen and use WPTR, the user can no longer drag to scroll the page. I was able to isolate the problem to this call to HammerJS in init():
h.get( 'pan' ).set( { direction: Hammer.DIRECTION_VERTICAL } );
I tried commenting that line out, and everything else in WPTR seems to work just fine in my app. Happy to send you a PR to delete that line if you think there are no unintended side effects.
There is a problem with Windows Mobile 10 (Edge). This does not work, can be reproduced on an emulator.
Hello Andy,
I pulled your repo and installed it on my tiny web site index page : https://goo.gl/9fEs3e
It doesn't give any error but doesnt work either.
you can see my index.htm that has your library included for the above live link.
I have track it was because the _panUp
method directly returned cause of pan.distance === 0
is true
Unless I'm doing something wrong I cannot get it to run in the standalone PWA version.
WPTR is the nicest implementation I've seen so far of pull-to-refresh. I think if you published an npm module, lots of developers would happily drop this in to their app. Including me!
this happens because at line 81, the scrollTop of the body is used:
pan.startingPositionY = dcoument.body.scrollTop;
instead of the contentEL.
So to fix this replace line 81 with
pan.startingPositionY = options.contentEl.scrollTop;
I am having an issue and not sure what is causing it.
wptr.1.1.js:44 Uncaught TypeError: Cannot read property 'classList' of null
According to the documentation, the ptrEl and contentEl options are the IDs of those respective elements. However, the code does not use them as IDs: it never passes them into, say, document.getElementId
to fetch the actual elements. This has the side effect of causing Hammer to throw an exception if these parameters are used.
There are two options here: pass in the elements directly (which does not require a code change but might be kind of wonky) or update the code to make sure we're getting elements back. I'll attach a pull request for the latter.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.