Android微信端的下拉刷新功能
程序员文章站
2023-12-12 17:47:58
在android和ios上对于下拉刷新的处理方法:
在微信公众号内,在面对下拉刷新这个问题上,android和ios都自己的表现方式:
ios:
...
在android和ios上对于下拉刷新的处理方法:
在微信公众号内,在面对下拉刷新这个问题上,android和ios都自己的表现方式:
ios:
android:
所以我们要给内容加载监听器
function bindevent() { document.addeventlistener('touchstart', touchsatrtfunc, false); document.addeventlistener('touchmove', touchmovefunc, false); document.addeventlistener('touchend', touchendfunc, false); }
注意:
document.addeventlistener("事件名称", 函数, false); function 某函数(event){ // 方法执行 }
我们首先要获取我们手指放在屏幕上的位置,
function touchsatrtfunc(evt) { try { var touch = evt.targettouches[0]; //获取第一个触点 var x = number(touch.pagex); //页面触点x坐标(起始位置)(相对于内容) var y = number(touch.pagey); //页面触点y坐标(起始位置)(相对于内容) var y1 = number(touch.screeny); //页面触点y坐标(起始位置)(相对于屏幕) //记录触点初始位置 startx1 = x; starty1 = y; startsy1 = y; } }
如果我们只是ios的话,那么我们只需要获取相对于内容的起始位置就可以了,但是由于android中的下拉是整体下拉.那么相对于内容的位移就不大,这就需要相对于屏幕的位置的取值了
function touchmovefunc(evt) { try { var scrolltop = $(".tui_container").scrolltop(); var touch = evt.targettouches[0]; //获取第一个触点 var x = number(touch.pagex); //页面触点x坐标 var y = number(touch.pagey); //页面触点y坐标(移动位置)(相对于内容) var y2 = number(touch.screeny); //页面触点y坐标(移动位置)(相对于屏幕) startx2 = x; starty2 = y; startsy2 = y2; if(scrolltop <= 0) { if(startsy2 - startsy1>100) { $(".loading_refresh").removeclass("disn"); settimeout(function(){ window.location.reload(); },1500) } } } }
手指在移动中执行的事件,获取到的值是不断变化的,当满足相对第一个获取到的值的偏差时执行事件刷新,这里的ios和android都试用.
function touchendfunc(evt) { try { var top = evt.target.scrolltop; var touch = evt.changedtouches[0]; //获取最后一个触点 var startx3 = number(touch.pagex); //页面触点x坐标 var starty3 = number(touch.pagey); //页面触点y坐标 var y3 = number(touch.screeny); //页面触点y坐标(移动位置)(相对于屏幕) startsy3=y3; var scrolltop = $(".tui_container").scrolltop(); } }
这里可以获取的是手指离开时获取的位置,但是由于android是整体下拉,这刷新主要根据的就是滑动滚动的scrolltop(),
android无法获取到scrolltop==0
时的情况,所以抛弃在手指滑动结束后执行的事件(我注释掉了,就不写了).
以上所述是小编给大家介绍的android微信端的下拉刷新功能,希望对大家有所帮助