• 豪门国际娱乐城备用站: 来一发,网页下拉刷新

    24 十一 2015 豪门国际新手指南 26 次 0

    来一发,网页下拉刷新豪门国际网上赌博 作者
    2015.11.12 12:30*
    写了5714字,被15人关注,获得了27个喜欢

    手机APP开发中,下拉刷新是一个很常见的功能,但是在网页中,这种模式用的很少。网页下拉刷新,看似简单的功能,但我在网上并没有找到比较好的解决方法,遂自己开发了一个。期间遇到了各种小坑,浏览器兼容,各种浏览器下拉默认事件,PC端无触摸事件~。

    简单的效果图

    触摸移动过程中判断是否处于下拉状态,标记开始状态
    触摸过程中控制提示内容 margin-top与 height 属性予以呈现
    触摸结束,请求数据
    请求数据成功/失败处理
    处理数据,下拉刷新完成

    清晰的流程认知很重要,接下来简单的说明流程

    下拉刷新需要下拉元素与下拉提示元素
    这里我们选择的容器是body,下拉提示元素自定义~

     body 
     div 
     !-- 刷新提示元素 -- 
     /div 
     /body 

    需要注意的是,下拉容器高度不能设置为0,否则不能为容器添加触摸事件

    定义初始数据

    开始之前定义一系列初始数据,

    var isValid = false, // 是否生效
     isTouching = false, // 触摸中标识
     isEfec = false, // 触摸是否生效
     isDestory = false, // 是否销毁 
     startX, startY, disY = 0, // 起始触摸X、y坐标, 移动Y坐标
     ...

    添加触摸事件

    document.body.addEventListener('touchstart', touchStart, false);
    document.body.addEventListener('touchmove', touchMove, false);
    document.body.addEventListener('touchend', touchEnd, false);
    var touchStart = function(evt) {
     var scrollTop = parseInt($el.scrollTop());
     if(scrollTop 0) return; // 滚动条高度大于0
     if(isDestory) return; // 销毁状态
     if(isTouching) return; // 当前处于触摸状态
     isTouching = true; // 触摸状态标标识
     isEfec = true; // 触摸开始生效
     var touch = evt.touches[0], //获取第一个触点
     x = parseInt(touch.pageX), //页面触点X坐标
     y = parseInt(touch.pageY); //页面触点Y坐标
     //记录触点初始位置
     startX = x;
     startY = y;
    }

    这一步唯一需要做的就是记录开始触摸点;

    触摸移动过程

    var touchMove = function(evt) {
     var $loadingEl = $loadingEl,
     touch = evt.touches[0], //获取第一个触点
     x = parseInt(touch.pageX), //页面触点X坐标
     y = parseInt(touch.pageY), //页面触点Y坐标
     t = y - startY; // 触摸距离
     // 距离必须大于灵敏距离触摸才生效
     if(!isValid t options.startPX) {
     isValid = true;
     // 阻止事件冒泡
     evt.preventDefault(); 
     // 省略几行代码
     disY = t;
    }

    在这一步中需要阻止事件冒泡事件,WAP端的部分浏览器会重写下拉事件,比如chrome与微信中(见下图)。



    chrome浏览器默认下拉刷新

    微信中默认下拉显示网页信息

    这里一大坑是:浏览器中下拉默认事件一旦触发后,就不能再通过冒泡阻止此事件。
    chrome浏览器中大概是15PX左右的下拉后触发默认刷新,微信中大概是6像素左右。

    触摸结束,请求数据

    // touchend事件
    var touchEnd = function(evt) {
     isValid = false;
     isEfec = false;
     disY = 0;
     var $loadingEl = options.$loadingEl,
     touch = evt.touches[0] || evt.changedTouches[0], //获取第一个触点
     y = parseInt(touch.pageY), //页面触点Y坐标
     t = y - startY;
     // Do some thing ...
     $.post(options.url, sendData, function(response, textStatus, xhr) {
     // Do something 
     }).error(function(){
     // Do something
    }

    触摸结束后需要做的是判断是否进行请求数据,
    请求数据成功后,处理数据,重置有关刷新的代码

    简单的说明就到此为止,如果有兴趣,可以从github中下载~

    下载地址:
    演示地址:
    Drag介绍文档:


    想上首页热门榜么?好内容想被更多人看到么?来投稿吧!如果被拒也不要灰心哦~入选文章会进一个队...

    · 48760人关注

    豪门国际网上赌博

    Categories:豪门国际娱乐城备用站

    标签:

    上一篇: 下一篇:

Baidu