Pull to refresh on webView?
Hello everyone. Been loving this platform! Good work, looking forward to seeing where appcelerator is headed.
I'm curious about the pull to refresh found in the kitchen sink in examples/table_view_pull_to_refresh.js functionality, and if there's anyone who may have tips or suggestions as to how to go about implementing this into a webView? It's for a news reader embedded in the bottom of the program displaying a css-formatted view of a webpage. I'm pretty new to all this stuff, so I'm not even sure if it'll be easier to keep my news in a webView or if it'd be better for me to try and integrate this into some kind of native view, but I'm really looking forward to implementing this wonderful functionality in my application one way or another.
1 Answer
-
Very late, but I figured out a way to do this. Hopefully it helps someone.
Basically, the idea is that you create the usual tableView with the pullToRefresh feature. Then create your webView as a child to a table row. You'll need to set the height of the row to
auto, layout toverticaletc.A few caveats:
Links inside the webView won't be clickable. I found a workaround to this which I documented as an answer to another question.
If you have a variable/unknown height webpage that you want to use, then you'll need to set the height of the tableViewRow and the webView during the
loadevent. Start with a decent default (e.g., 400), then update it with something like:
webView.addEventListener('load', function(e) { newHeight = webView.evalJS('$("#container").height()'); webView.height = newHeight; tableView.data[0].rows[0].height = newHeight; });I'm using jQuery in the above, but you can use pure JS if you want.