Using swipe. js in zepto to create a carousel image with swipeUp, swipeDown is ineffective _ javascript skills

SwipeJS is a lightweight mobile slide component that supports touch movement, good resistance and anti-skid performance, allowing mobile web applications to display more content, it can solve our needs for moving Web. The following section describes how to use swipe In zepto. swipeUp is attached to the carousel image produced by js, and swipeDown is ineffective. If you need a friend, you can refer to it in mobile web development. Because the mobile phone interface is small, in order to display more images, carousel images are often used and mobile phone traffic needs to be considered. By asking others and Baidu, I personally feel swipe. js is easy to use.

It is a pure javascript tool, does not need to be imported with other js libraries, while compatible with jQuery and zepto, the size of the compressed version of only 6 kb is very suitable for mobile development, its git address: https://github.com/thebird/swipe

The usage of git is clearly described. The key code is as follows:

 
  
  
  
 
.swipe { overflow: hidden; visibility: hidden; position: relative;}.swipe-wrap { overflow: hidden; position: relative;}.swipe-wrap > p { float:left; width:100%; position: relative;}

window.mySwipe = Swipe(document.getElementById('slider'),opt);

Among them, the. swipe nested. swipe-wrap html tree model should not be modified, as for the innermost p can replace other, such as li

Only a few pieces of code that need to be appealed can be used to create a carousel image. However, in actual projects, especially on the banner at the top of the homepage, you must add the page index, you also need to configure the control parameters,Its main parameters are configured as follows:

StartSlide Integer (default: 0)-start position of Rolling

Speed Integer (default: 300)-animation scrolling interval (seconds)

Auto Integer-start automatic slide (time between slides in milliseconds)

Continuous Boolean (default: true)-creates an infinite loop (whether to slide cyclically when the animation ends)

DisableScroll Boolean (default: false)-whether to stop slide scrolling when the scroll bar is rolled

StopPropagation Boolean (default: false)-whether to stop event bubbling

Callback Function-callback Function in slide running

TransitionEnd Function-callback Function after the animation ends

The main api functions are as follows:

Prev (): Previous Page

Next (): next page

GetPos (): Get the index of the current page

GetNumSlides (): Get the number of all items

Slide (index, duration): slide method

The following code is used in projects.

      
        
 
 
          
  
  
 
          
  
  
 
          
  
  
 
          
  
  
 
          
  
  
 
        
 
 
        
 
 
          
  
  
          
  
  
          
  
  
          
  
  
          
  
  
        
 
 
      
    
.banner {        width: 100%;        position: relative;      }      .banner .swipe {        overflow: hidden;        position: relative;      }      .banner .swipe-wrap {        overflow: hidden;        position: relative;        list-style: none;      }      .banner .swipe-wrap li {        float: left;        position: relative;      }      .banner img {        width: 100%;        vertical-align: middle;      }      .banner .slide-trigger {        position: absolute;        left: 0;        bottom: 0;        width: 100%;        z-index: 10;        display: -webkit-box;        display: -moz-box;        display: -ms-flexbox;        display: -webkit-flex;        display: flex;        -webkit-box-pack: center;        -moz-box-pack: center;        -ms-flex-pack: center;        -webkit-justify-content: center;        justify-content: center;        list-style: none;      }      .banner .slide-trigger li {        width: 10px;        height: 10px;        background: #FFF;        margin: 5px;        -webkit-border-radius: 50%;        -moz-border-radius: 50%;        -ms-border-radius: 50%;        -o-border-radius: 50%;        border-radius: 50%;      }      .banner .slide-trigger .cur {        background: #2fc7c9;      }var slider = $('#slider');    slider.find(".slide-trigger").find("li").eq(0).addClass("cur");    window.mySwipe = new Swipe(document.getElementById('slider'), {      speed: 400,      auto: 3000,      callback: function(index, elem) {        slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");      }    });

SwipeUp and swipeDown in zepto are ineffective.

I am reading zepto and find a problem when I see some events in it:

$ ('Body '). swipeUp (function (e) {alert ('swipeup'); // occasionally valid}) $ ('body '). swipeDown (function (e) {alert ('swipeid'); // occasionally valid}) $ ('body '). tap (function () {alert ('tap'); // OK}) $ ('body '). swipeLeft (function () {alert ('swipeleft '); // OK}) $ ('body '). swipeRight (function () {alert ('swiperight '); // OK })

In mobile terminal swipeUp, swipeDown is ineffective, and several others are valid. Why?

Solution 1:

Zepto should introduce the touch. js module to github. download it from the official website, and then introduce touch. js.

Solution 2:

It blocks the default drop-down event of the browser and adds the following code.

document.addEventListener('touchmove', function (event) {event.preventDefault();}, false);