微信html下拉刷新页面,网页|利用touch实现下拉刷新

// 下拉刷新页面

//onload是window窗口对象的事件属性，语句是把“匿名函数”赋值给window的onload事件属性，当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句。

window.onload = function () {

var Y ,newY;

// 监听页面touch事件

var touch = document.getElementsByClassName('touch')[0];

//选择全部的类

touch.addEventListener('touchstart',function (e) {//侦听事件bai并处理相应的函数

var e = e || window.event;

Y = e.changedTouches[0].pageY;//触点坐标选取

// console.log(Y);

});

touch.addEventListener('touchmove',function () {

var e = e ||window.event;

newY = e.changedTouches[0].pageY;

// console.log(newY);

touchmove(Y,newY);

})

touch.addEventListener('touchend',function  (e) {

var e = e || window.event;

newY = e.changedTouches[0].pageY;

// console.log(newY);

touchend(Y,newY);

});

}

function touchmove (Y,newY) {

console.log(Y +"||"+newY)

var distance = newY -Y;

if(distance>20){

$(‘.header’).animate({ //动画效果

‘opacity’ : 0.8//透明度

},100);

// console.log(distance);

// document.getElementsByClassName('hrader')[0].style.opacity = 0.8;

var refresh = document.getElementsByClassName('refresh')[0];

distance = distance > 100 ? 100 :distance;

$('.refresh').css('height',distance+"px");

document.getElementById('text').innerHTML= "释放立即刷新..."

$('#text').css('line-height',distance+40+"px");

}

}

function touchend(Y,newY){

var distance = newY -Y;

if(distance>20){

//bai用来设置或获取位于对象起始和结du束标签内的HTML     document.getElementById('text').innerHTML=  "正在刷新";

document.getElementById('move').innerHTML="

setTimeout(function(){

location.reload();

},2000);

}