Gunakan swipe.js dalam zepto untuk mencipta imej karusel dengan kemahiran swipeUp dan swipeDown not working

Gunakan swipe.js dalam zepto untuk mencipta imej karusel dengan kemahiran swipeUp dan swipeDown not working_javascript

WBOY

Lepaskan： 2016-05-16 15:42:01

asal

2061 orang telah melayarinya

Dalam pembangunan web mudah alih, disebabkan oleh antara muka mudah alih yang kecil, karusel sering digunakan untuk memaparkan lebih banyak gambar dan masalah trafik mudah alih juga perlu diambil kira Selepas berunding dengan orang lain dan Baidu, saya secara peribadi merasakan leretan itu. js adalah lebih baik digunakan.

Ia adalah alat javascript tulen yang tidak perlu diimport dengan perpustakaan js lain. Ia juga serasi dengan jQuery dan zepto Versi termampat hanya bersaiz 6kb dan sesuai untuk pembangunan mudah alih: https://github .com/thebird/swipe

Kaedah penggunaan pada git agak jelas Kod utama adalah seperti berikut

<div id='slider' class='swipe'>
 <div class='swipe-wrap'>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
}
.swipe-wrap {
 overflow: hidden;
 position: relative;
}
.swipe-wrap > div {
 float:left;
 width:100%;
 position: relative;
}

Salin selepas log masuk

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

Salin selepas log masuk

Sebaik-baiknya jangan menukar model pokok html .swipe nested .swipe-wrap Bagi div paling dalam, anda boleh menggantikannya dengan yang lain, seperti li, dsb.

Hanya beberapa keping kod diperlukan untuk melengkapkan pengeluaran karusel Walau bagaimanapun, dalam projek sebenar, terutamanya sepanduk di bahagian atas halaman utama, indeks halaman perlu ditambah, dan parameter kawalan. perlu dikonfigurasikan , Konfigurasi parameter utamanya adalah seperti berikut:

startSlide Integer (lalai:0) - Kedudukan untuk mula menatal

integer kelajuan (lalai:300) - selang tatal animasi (saat)

Auto Integer - Mulakan tayangan slaid automatik (masa antara slaid dalam milisaat)

Boolean berterusan (lalai:true) - Buat gelung tak terhingga (sama ada hendak meluncur dalam gelung apabila semua animasi tamat)

disableScroll Boolean (default:false) - sama ada hendak menghentikan penatalan slaid semasa menatal bar skrol

stopPropagation Boolean (default:false) - sama ada hendak menghentikan acara menggelegak

Fungsi panggil balik - fungsi panggil balik semasa tayangan slaid dijalankan

Fungsi Tamat peralihan - fungsi panggil balik apabila animasi tamat

Dan fungsi api utamanya adalah seperti berikut:

sebelumnya()：Halaman sebelumnya

seterusnya(): halaman seterusnya

getPos(): Dapatkan indeks halaman semasa

getNumSlides(): Dapatkan nombor semua item

slaid(indeks, tempoh): kaedah gelongsor

Berikut ialah kod sebenar yang digunakan dalam projek

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img src="img/1.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/2.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/3.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/4.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/5.jpg">
            </a>
          </li>
        </ul>
        <ul class="slide-trigger">
          <li class="cur"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
.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");
      }
    });

Salin selepas log masuk

Leret Ke Atas dan Leret Ke Bawah dalam zepto tidak mempunyai kesan

Saya sedang menonton zepto, dan apabila saya melihat beberapa acara di dalamnya, saya mendapati masalah:

$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})

Salin selepas log masuk

Pada terminal mudah alih, leret ke atas dan leret ke bawah tidak mempunyai kesan, tetapi yang lain berfungsi.

Penyelesaian 1:

Zepto perlu memperkenalkan modul touch.js. Ia tidak tersedia di tapak web rasmi Pergi ke github untuk memuat turunnya dan kemudian memperkenalkan touch.js

Penyelesaian 2:

adalah kerana acara tarik turun lalai penyemak imbas disekat dan kod berikut ditambahkan.

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

Salin selepas log masuk