移动端网页下拉刷新

一、采用触摸事件touchmove。

1、定义公共变量

var timer = null;

var startY, moveY, initTop, oldTop, newTop;

2、添加事件

$(‘#container ul‘).on(‘touchstart‘, function(e){

startY = e.originalEvent.touches[0].pageY;

initTop = 0;

});

$(‘#container ul‘).on(‘touchmove‘, function(e){

moveY = e.originalEvent.touches[0].pageY;

scrollEnd();

});

3、定时触发方法

function scrollEnd(){

if(timer) clearTimeout(timer);

newTop = $(window).scrollTop();

if(newTop === oldTop) {

clearTimeout(timer);

if(initTop != newTop){

var wHeight = $(window).height();

var dHeight = $(document).height();

if((newTop > 0) && (newTop + wHeight >= dHeight) && (startY - moveY > 0)){

//执行业务代码

}

}

} else{

oldTop = newTop;

timer = setTimeout(scrollEnd,100);

}

}

二、采用scroll事件

$(window).scroll(function(){

var scrollTop = $(this).scrollTop();//滚动条距离Y轴的高度

var documentHeight = $(document).height();//整个窗口的高度

var height = $(this).height();//可视区域的高度

if((scrollTop + height) == documentHeight){

//执行业务代码

}

});

时间: 2024-10-13 11:44:21

移动端网页下拉刷新的相关文章

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(st

移动端实现下拉刷新

第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑动时,这个事件会被连续触发. 如果我们不希望页面随之滑动,我们可以使用event的preventDefault来阻止这个默认行为. 3.touchend: 当手指滑动后离开屏幕,这时就触发了touchend事件. 4.touchcancel: 系统停止跟踪触摸时候会触发.例如在触摸过程中突然页面alert()一个提示框

vue2.0 移动端,下拉刷新,上拉加载更多 插件

本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用. <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:tou

移动端touch实现下拉刷新

移动端实现下拉刷新 第一部分:四个touch事件 1.touchstart:只要将手指放在了屏幕上(而不管是几只),都会触发touchstart事件. 2.touchmove: 当我们用手指在屏幕上滑动时,这个事件会被连续触发. 如果我们不希望页面随之滑动,我们可以使用event的preventDefault来阻止这个默认行为. 3.touchend: 当手指滑动后离开屏幕,这时就触发了touchend事件. 4.touchcancel: 系统停止跟踪触摸时候会触发.例如在触摸过程中突然页面al

移动端下拉刷新原理和实例

移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下.其中用到了一些touch事件和一些DOM属性CSS3属性.直接上代码,代码里面有注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

JS实现移动端下拉刷新更多分页请求功能方法2.0

本次2.0升级版为js实现移动端加载更多下拉刷新更多分页请求功能方法(数据一次请求,前端分页,适用于数据流量较少,数据量压力小的页面)同时新增loading组件,turnToTop组件. 本文原创非转载,如需转载请注明出处:http://www.cnblogs.com/A-QBlog/p/7068959.html 废话不多说,直接上代码: 1 ;(function (w, $) { 2 3 var loadmore = { 4 /*单页加载更多 通用方法 5 * 6 * @param callb

关于移动端手势滑动和上拉加载下拉刷新简单模拟笔记

本人接触前端不久,写的不好的请多多指教,欢迎指出 最近做到一个需求需要实现移动端的手势操作,在网上有找到不少不错的插件(PS:就不打广告了,一搜一大堆) 插件用起来确实不错,不过自己想研究下,便写了一个demo,实现了上拉.下拉触发,及左右手势滑动触发 上拉.下拉触发用了 $(window).scroll()                //当滚动条滚动时触发 scrollTop()(滚动条距离顶部的高度) $(document).height(当前页面的总高度) $(this).height

better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div> 3.js