资讯专栏INFORMATION COLUMN

移动端原生JS实现手指跟随的触控滑动

时飞 / 1410人阅读

摘要:为了模拟原生应用的触控效果,大量的应用使用了手指跟随的滑动效果,也就是用手指滑动幻灯片的效果,什么是手指跟随如图网上滑动插件有不少,但好像没一个好用的不是太多,就是不灵活这里用原生实现了该功能,不仅代码量不多,逻辑也较简单。

为了模拟原生应用的触控效果,大量的“H5”应用使用了手指跟随的滑动效果,也就是用手指滑动幻灯片的效果, 什么是手指跟随,如图;

网上滑动插件有不少,但好像没一个好用的(不是bug太多,就是不灵活)这里用原生JS实现了该功能,不仅代码量不多,逻辑也较简单。移动端H5页面的触控触发事件在我之前的一篇博客中写了挺多.原博地址原生JS实现触控滑动(swipe)图片轮播 (里面大致罗列了HTML5中touch事件的使用方法)

这里写的PageSlide的使用的方法是将HTML结构写好后往里传参就可以了.它接受所有滑动页面对象(在这里是document.querySelector("#pages") ) 和要设定的方向(用X,Y表示横向或者纵向)以及一个可选的扩展函数.
DEMO在此(使用模拟器或者移动设备打开预览):
移动端原生JS实现手指跟随的触控滑动(纵向)
移动端原生JS实现手指跟随的触控滑动(横向)

直接下载代码出门左转Github? PageSlideDemo

扫码看DEMO(纵向):

这里将所有的代码都封装进一个PageSlide的原型对象中,可以当成原生JS插件来使用,它所要求的HTML的结构为:

// 所有滑动页面的容器
content
//所有滑动单页
animation element
...

CSS样式结构为:

/* 注意加html标签,使得高度100%等于视窗高度 */
html,body{
  width:100%;
  height:100%;
  margin:0 ;
  padding:0 ;
  overflow:hidden; 
  ……
}

.pages{
    width: 100%;
    height: 100%;
    position: relative;
    ……
  
}
.page {
/*滑动页面的统一样式 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0px, 100%, 0px);
    -webkit-transform: translate3d(0px, 100%, 0px);
    transition: transform .5s ease-out;
    -webkit-transition: -webkit-transform .5s ease-out;
    
}
.page1{……}
.page2{……}
.page3{……}
/* 所有动画使用类控制 */
.play .myAnimation {

...


}

要实现手指跟随的滑动效果, 关键在于通过touch事件来设置transform:translate3d(x,y,z)的参数,并在滑动结束(touchend)设置一个最小滑动距离minRange,该距离范围内的滑动,translate3d的参数等于touchmove的滑动距离,当大于minRange时, 则触发下一页(或上一页)的整体滑动,translate3d的X或Y的参数也就是视窗的宽(横向滑动时)或者高(纵向滑动时)

另外,对于一个网页app,还需要解决一个问题,即每个页面中可能有动画或者其他的事件需要在该页面出现时才开始播放,动画采用css类控制, 这里采用在每个当前页面中添加一个.play的类作为标记, 在每个页面的CSS动画设置中,同样加上.play类名,这样就实现了当页面出现才开始播放本页动画的功能。

PageSlide的代码解析如下:

// PageSlide接收三个参数:页面元素,要设定的滑动方向,可选的扩展函数
var PageSlide = function(el, swipe, options) {
    this.options = options || {}  //可选函数
    this.current = 0  //当前页面索引
    this.pageX  //横向的手指落点
    this.pageY   //纵向的手指落点
    this.height //设备高度
    this.width   //设备宽度
    this.flag  //判断滑动方向的变量
    this.move  //滑动的距离

    this.$el = el //当前页面的对象
    this.swipe = swipe || "X" //滑动方向参数
    this.resize().init().bindEvents() //初始化
}


PageSlide.prototype.init = function(i) {
    var current = i ? this.$el.children[i] : this.$el.firstElementChild
    if (!current) throw "ERROR";
//moving类名作为当前滑动页面的标记,也在样式中作滑动的扩展效果
    current.classList.add("moving")
    current.style.webkitTransform = "translate3d(0,0,0)"
//以swipe的值预设置其他页面的宽高,获得流畅的交互效果
for(var i = 1; i  Math.abs(Y) ? "X" : "Y"

        if (this.flag === this.swipe) {
            current.classList.add("moving")
            next && next.classList.add("moving")
            prev && prev.classList.add("moving")
        }
    }

    if (this.flag === this.swipe) {
        e.preventDefault()
        e.stopPropagation()

        switch (this.swipe) {
            case "X":
                //swipe horizontal
                this.move = X

                this.setX(current, X)
                next && (this.setX(next, X + this.width))
                prev && (this.setX(prev, X - this.width))
                break;
            case "Y":
                //swipe vertical
                this.move = Y

                this.setY(current, Y)
                next && (this.setY(next, Y + this.height))
                prev && (this.setY(prev, Y - this.height))
                break;
        }
    }
}

PageSlide.prototype.touchend = function(e) {
    var minRange = 50
    var move = this.move
    var current = this.getCurrent()
    var next = current.nextElementSibling
    var prev = current.previousElementSibling

    current.classList.remove("moving")
    next && next.classList.remove("moving")
    prev && prev.classList.remove("moving")
    if (!this.flag) return

    e.preventDefault()
   //滑动结束前往下一页面,next()方法调用了go()方法
    if (move < -minRange && next) return this.next()
    if (move > minRange && prev) return this.prev()
    this.reset()
}

PageSlide.prototype.touchcancel = function(e) {
    var current = this.getCurrent()
    var next = current.nextElementSibling
    var prev = current.previousElementSibling

    current.classList.remove("moving")
    next && next.classList.remove("moving")
    prev && prev.classList.remove("moving")
    this.reset()
}

//动态设定translate3d参数方法
PageSlide.prototype.setX = function(el, x, unit) {
    el && (el.style.webkitTransform = "translate3d(" + x + (unit || "px") + ",0,0)")
}

PageSlide.prototype.setY = function(el, y, unit) {
    el && (el.style.webkitTransform = "translate3d(0," + y + (unit || "px") + ",0)")
}
//设置当前触控页面translate3d参数为0的方法
PageSlide.prototype.setCurrent = function(el, i) {
    el && (el.style.webkitTransform = "translate3d(0,0,0)")

    if (i) {
        this.current = i
        this.$current = this.$el.children[i]
    }

}
//调用go()方法前往下一或上一页面
PageSlide.prototype.next = function() {
    this.go(this.current + 1)
}

PageSlide.prototype.prev = function() {
    this.go(this.current - 1)
}
//重置方法,用于初始化以及当前页面的重置
PageSlide.prototype.reset = function() {
    var width = this.width
    var height = this.height
    var swipe = this.swipe
    var current = this.getCurrent()
    var prev = current.previousElementSibling
    var next = current.nextElementSibling

    this.setCurrent(current)
    prev && (this["set" + swipe](prev, -(swipe === "X" ? width : height)))
    next && (this["set" + swipe](next, swipe === "X" ? width : height))
}
//去往下一或上一页面的go方法
PageSlide.prototype.go = function(i) {
    var onFinish = this.options.onFinish
    var current = this.getCurrent()
    var total = this.$el.childElementCount
    var target = this.$el.children[i]
    var d = i < this.current ? -1 : 1


    if (i === this.current || i < 0 || i >= total) return
    if (onFinish && (typeof onFinish === "function")) onFinish.call(this, i)
    // 滑动完成调用方法
    typeof this.options.tranSetionEnd ==="function" && this.options.tranSetionEnd.call(this)
    this.current = i

    this["set" + this.swipe](current, -d * (this.swipe === "X" ? this.width : this.height))
    this.setCurrent(target, i)
    this.finish(current, target)
}
//滑动完成后删除当前页面.play标记以及为下一页面添加.play标记
PageSlide.prototype.finish = function(curr, target) {
    this.flag = null
    setTimeout(function() {
        curr && curr.classList.remove("play")
        target && target.classList.add("play")
    }, 3e2)
}

/*direct to a page */ 
//直达某一页面的方法, 因为有个项目的需要,写了这个方法,要从任意页面开始滑动依然能保持正常的滑动体验,就需要将直达页面的前面所有页面的translate3d参数都设置为(0,-height,0)  
PageSlide.prototype.direct = function(i){
    if(i&&typeof(i)==="number") 
       { 
       this.go(i) 
    for(var j = 0; j< i ;j++) {
        this["set" + this.swipe](this.$el.children[j], -1 * (this.swipe === "X" ? this.width : this.height))       
        }
       }
    else  return
        
    
    }



总算写完了,吃饭~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86019.html

相关文章

  • 把鼠标、触摸屏、触控笔统一起来,Pointer Events介绍

    摘要:把事件统一起来处理用户的输入要用到事件。就这样,提取了鼠标触摸屏触控笔的共通之处,以方便开发跨设备的应用。虽然是一个抽象,但它包含了鼠标触摸屏触控笔的全部内容。手指与触摸屏的屏幕接触着,认定为。 跨设备的问题 平时我们在电脑上访问的网页,大部分情况下是用鼠标来控制的。比如说链接跳转,就是鼠标指针移动到链接文字或图片的位置,然后点击一下。又比如说滚动屏幕,滑动一下鼠标滚轮就可以。 如果是...

    FleyX 评论0 收藏0
  • 把鼠标、触摸屏、触控笔统一起来,Pointer Events介绍

    摘要:把事件统一起来处理用户的输入要用到事件。就这样,提取了鼠标触摸屏触控笔的共通之处,以方便开发跨设备的应用。虽然是一个抽象,但它包含了鼠标触摸屏触控笔的全部内容。手指与触摸屏的屏幕接触着,认定为。 跨设备的问题 平时我们在电脑上访问的网页,大部分情况下是用鼠标来控制的。比如说链接跳转,就是鼠标指针移动到链接文字或图片的位置,然后点击一下。又比如说滚动屏幕,滑动一下鼠标滚轮就可以。 如果是...

    elarity 评论0 收藏0
  • 从零搭建移动H5开发项目实战

    摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...

    terro 评论0 收藏0
  • 从零搭建移动H5开发项目实战

    摘要:并且除了常用的端,还要考虑微信端,或者是端。所以我们要有一套机制,在端上走的代码,在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目,我总结了以上这些移动开发难点,希望之后的人能少踩点坑,站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多...

    pepperwang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<