美文网首页
移动端触摸分页方案

移动端触摸分页方案

作者: 如意同学Try | 来源:发表于2018-06-19 15:41 被阅读0次
    • 场景:移动端列表显示,数据庞大。后台数据有分页字段

    • 需求:需要快速显示页面,需要显示当前页数,需要跨页跳转
      Pc端可以使用分页按钮,但是移动端屏幕小,分页按钮不方便操作。

      思路分析

    1. 思路1:下拉刷新实现分页加载
      可以使用iscroll插件进行下拉刷新,符合用户使用习惯。但是无法进行跨页跳转,也无法显示当前页码
    2. 思路2:使用搜索功能,查找想要的数据。
      参考了淘宝对商品的筛选功能,用户可以选择筛选条件进行查询。实用性强,但实现步骤较为繁琐
    3. 思路3:使用滑块快速跳转页码
      这种方式最符合需求,查找了资料,可以使用UIsilder组件,但是样式不太美观,与产品界面风格不符。

    经过讨论和初步实践,决定选取第3种方案,但不采取slider组件,参考某些阅读器的分页样式,也可以参考微信通讯录的滑动实现。

    类似效果图

    image

    具体实操

    html和css部分
    //页码部分
    <div id="sliderPage">
        <div id="wrap"  ></div>
    </div>
    
    //放大显示页码标签
    <div class="largePage" >
        <span>1</span>
    </div>
    

    设置样式让页面如图显示

    js部分

    滑动跳转,滑动在于Js部分的动作交互,跳转在于数据接口的调用。

    1.滑动
    这部分主要使用了touch系列事件,在页面dom上添加touch事件。我这里直接加在了html节点上。

    <div id="sliderPage" ontouchend="touchEnd()" ontouchmove="move()"></div>
    

    重点代码

    根据数据创建页码

    function createPage(){
        ...
        //pageCount为页码数。
        //total为数据总数,这里每页显示10条。
        var pageCount =  parseInt((total+ (10 - 1)) / 10);   
        var str;
        for(let i = i;i <= pageCount+1;i++){
            str +='<a ontouchstrat=start(this) >'+i+'</a>'
        }
        $("wrap").html(str);
    }
    
    #### touchstart事件获取当前页码,并将页码显示在largepage下的标签中
    
    

    function start(n){
    var text= (n).text;(.largePage span).text(text);
    $(".largePage span").css("opacity","1")
    }

    
    #### touchmove滑动事件
    
    

    function move(){
    //滑动切换页码
    //将页码显示在
    //根据start对象的宽高进行切换
    start(document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY))
    }

    
    #### touchend滑动结束,页码提示隐藏,跳转页面
    
    

    function touchEnd(){
    $(".largePage").animate({
    opacity:0
    },500)
    //页面跳转操作
    }

    现象分析

    功能逻辑不复杂,但是涉及到了touch系列事件的操作。页面如果存在一些click事件或者其他的touch事件,就会出现各种问题。

    对click事件的影响。

    touch事件结束后会触发节点的click事件

    在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->click

    事件流本身会持续进行下去。

    touchstart 触发之后,click事件还被触发了,onclick属性也被触发了。

    使用preventDefault()方法可以阻止click事件被触发。

    event.preventDefault()表示取消默认事件,比如可以禁止touchmove事件触发时页面滚动。一般情况都要加上,否则会出现很多怪异现象

    事件冒泡

    页面document也有touchmove和end事件,用于显示和隐藏页码条。

    //触发touchmove事件显示页码条
    document.addEventListener("touchmove",function(){
        $("#sliderPage").animate({
            opacity:1
        },500)
    },false);
    
    //触发touchend事件隐藏页码条
    document.addEventListener("touchend",function(){
        $("#sliderPage").animate({
            opacity:0
        },2000)
    },false)
    

    这么写在sliderPage上滑动的时候也会触发这两个事件,造成sliderPage不稳定时隐时现。所以要关闭touch事件的冒泡行为

    //在所有的Touch事件中加上这一句
    event.stopPropagation();
    

    不过我采取了另外一种方式。使用监听滚动条变化来显示和隐藏页码条,也就没有这个问题了.

    //页面滚动时,显示页码条
    $(window).on('scroll', function() {
        $("#sliderPage").animate({
            opacity:1
        },500);
        //设置延时,隐藏页码条
        setInterval(function(){
            $("#sliderPage").animate({
                opacity:0
            },2000);
        },3000)
    })
    #### touch事件拓展
    
    touch事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:
    
    *   bubbles(起泡事件的类型)
    *   cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)
    *   clientX(返回当事件被触发时,鼠标指针的水平坐标)
    *   clientY(返回当事件触发时,鼠标指针的垂直坐标)
    *   screenX(当某个事件被触发时,鼠标指针的水平坐标)
    *   screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)
    
    touch对象代表一个触点,可以通过event.touches[0]获取
    除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性
    
    *   touches:表示当前跟踪的触摸操作的touch对象的数组。
    *   targetTouches:特定于事件目标的Touch对象的数组。
    *   changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
    
    每个Touch对象包含的属性如下。
    
    *   identifier:标识触摸的唯一ID。
    *   clientX:触摸目标在`视口`中的x坐标。
    *   pageX:触摸目标在`页面`中的x坐标
    *   screenX:触摸目标在`屏幕`中的x坐标。
    *   target:触摸的DOM节点目标。
    *   ex:
    
    
    function load (){  
        document.addEventListener('touchstart',touch, false);  
        document.addEventListener('touchmove',touch, false);  
        document.addEventListener('touchend',touch, false);  
    }
    
    function touch (event){  
        var event = event || window.event;  
        var oInp = document.getElementById("inp"); 
        switch(event.type){  
            case "touchstart":  
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
            case "touchend":  
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";  
                break;  
            case "touchmove":  
                event.preventDefault();  
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";  
                break;  
        }  
    }    
    window.addEventListener('load',load, false);
    

    相关文章

      网友评论

          本文标题:移动端触摸分页方案

          本文链接:https://www.haomeiwen.com/subject/yjthlftx.html