zoukankan      html  css  js  c++  java
  • zepto.js介绍(持续更新)

    前言:

      zepto是一个简化版的jQuery,主要针对移动端开发。

      简化了jQuery里很多的浏览器兼容性代码,jQuery的很多方法都被拿掉了(eg:slideUp)。

      WP设备兼容性很差。

      官方链接

      目前还不够完善,开发中总会遇到一些问题,下面简单列举2个开发中遇到的问题:

    1.animate方法:

      问题:

        WP设备中,回调方法不会等待动画执行完后再执行,而是和动画同步执行。

      代码: 

    $('#selector').animate({ 'width': '60%' }, 300, function() {
        $('#xx-button').show();
    })

      原因:

        zepto里的animate方法实现机制和jQuery不同,zepto是基于css3的动画,而jQuery是基于队列缓存机制   

      解决:

        用css3的动画实现代替animate方法,eg:animate、tranform等。

    2.tap事件穿透:

      问题:

        当两个元素重叠在一起,且都绑定了zepto的tap事件时,点击上一层元素时会触发下一层的事件,特别当下一层是input框时,必"穿透"。

      代码:    

    $('#selector').on('tap', function() {
        // do something
    })

      原因:

        Google的解释:tap事件冒泡到body上时才触发。 

      解决:

    • 使用github的fastclick库
    • 监听touchend事件,使用preventDefault()阻止冒泡。
    • 使用css3的pointer-events=true,pointer-events=none切换。
    • 如果还不行,建议使用click代替tap。

    PS:

      移动端开发(WebApp、hybrid)中可以使用zepto,不过还是得谨慎。

  • 相关阅读:
    2019 SDN阅读作业
    2019 SDN上机第3次作业
    SDN实验2
    SDN
    说好不肝---第五次作业
    [2020BUAA软工助教]助教每周小结(week 8)
    [2020BUAA软工助教]助教每周小结(week 7)
    [2020BUAA软工助教]助教每周小结(week 6)
    [2020BUAA软工助教]助教每周小结(week 5)
    [2020BUAA软工助教]助教每周小结(week 4)
  • 原文地址:https://www.cnblogs.com/tww316/p/4524415.html
Copyright © 2011-2022 走看看