码迷,mamicode.com
首页 > 移动开发 > 详细

移动web前端下拉刷新效果

时间:2019-06-05 17:49:57      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:cti   device   行操作   nbsp   func   span   chm   ati   复制   

直接复制粘贴 放在页面中即可

<script>
window.onload = function(){
window.addEventListener(‘touchstart‘, touchstart, false);
window.addEventListener(‘touchmove‘, touchMove, false);
}

var _start = 0; 
var _end = 0;
function touchstart(event) {
var touch = event.targetTouches[0];
_start = touch.pageY; 
}
function touchMove(event){ 
var touch = event.targetTouches[0]; 
_end = ( touch.pageY - _start); 
//下滑才执行操作 
if(_end > 200){     //200即手机下滑屏幕的距离,超过200则执行刷新动作
location.reload();


</script>

 

 

 

<script type="text/javascript">
//全局变量,触摸开始位置
var startX = 0, startY = 0;

//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置

if (y < 370) {
window.location.href = window.location.href;
}
}
catch (e) {

}
}

//绑定事件
function bindEvent() {
document.addEventListener(‘touchstart‘, touchSatrtFunc, false);

}
//判断是否支持触摸事件
function isTouchDevice() {
try {
document.createEvent("TouchEvent");

bindEvent(); //绑定事件
}
catch (e) {
}
}
window.onload = isTouchDevice;
</script>

  

移动web前端下拉刷新效果

标签:cti   device   行操作   nbsp   func   span   chm   ati   复制   

原文地址:https://www.cnblogs.com/roxanneQQyxm/p/10980911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!