zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술

모바일 웹 개발에서는 작은 모바일 인터페이스로 인해 더 많은 사진을 표시하기 위해 캐러셀을 사용하는 경우가 많으며 모바일 트래픽 문제도 고려해야 합니다. js를 사용하는 것이 더 좋습니다.

다른 js 라이브러리와 함께 가져올 필요가 없는 순수 자바스크립트 도구입니다. 또한 jQuery 및 zepto와도 호환됩니다. 압축된 버전은 크기가 6kb에 불과하며 모바일 개발에 적합합니다. 🎜>https://github.com/thebird/swipe

git에서의 사용법은 매우 명확합니다. 키코드는 다음과 같습니다

<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;
}

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

.swipe 중첩 .swipe-wrap의 HTML 트리 모델을 변경하지 않는 것이 가장 좋습니다. 가장 안쪽 div는 li 등의 다른 것으로 교체할 수 있습니다.

캐러셀 제작을 완료하려면 몇 개의 코드만 필요합니다. 그러나 실제 프로젝트에서는 특히 홈페이지 상단의 배너에 페이지 색인을 추가해야 하며 컨트롤의 매개변수도 필요합니다. ,

주요 매개변수 구성은 다음과 같습니다.

startSlide 정수(기본값:0) - 스크롤을 시작할 위치

속도 정수(기본값:300) - 애니메이션 스크롤 간격(초)

auto Integer - 자동 슬라이드쇼 시작(밀리초 단위의 슬라이드 간 시간)

continuous Boolean (기본값:true) - 무한 루프 생성(모든 애니메이션이 끝날 때 루프에서 슬라이드할지 여부)

disableScroll Boolean(기본값:false) - 스크롤 막대를 스크롤할 때 슬라이드 스크롤을 중지할지 여부

stopPropagation Boolean(기본값:false) - 이벤트 버블링을 중지할지 여부

콜백 기능 - 슬라이드쇼 실행 중 콜백 기능

transitionEnd 함수 - 애니메이션 종료 시 콜백 함수

그리고 그의 주요 API 기능은 다음과 같습니다.

prev()：이전 페이지

다음(): 다음 페이지

getPos(): 현재 페이지의 색인을 가져옵니다

getNumSlides(): 모든 항목의 개수를 가져옵니다

슬라이드(인덱스, 기간): 슬라이딩 방식

다음은 실제 프로젝트에 사용된 코드입니다

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy" alt="zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술" >
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy" alt="zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술" >
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy" alt="zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술" >
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy" alt="zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술" >
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy" alt="zepto에서 swipe.js를 사용하여 swipeUp 및 swipeDown이 작동하지 않는 캐러셀 이미지 생성_javascript 기술" >
            </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");
      }
    });

zepto의 SwipeUp 및 swipeDown은 효과가 없습니다

zepto를 보다가 그 안에 어떤 이벤트가 있는 걸 봤는데 문제가 발견됐어요.

$(‘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
})

모바일 단말기에서는 swipeUp과 swipeDown이 효과가 없지만 다른 것들은 작동합니다. 무슨 일인가요?

해결책 1:

Zepto는 touch.js 모듈을 도입해야 합니다. 공식 웹사이트에서는 사용할 수 없습니다. github에 가서 다운로드한 후 touch.js를 도입하세요.

해결책 2:

브라우저의 기본 풀다운 이벤트가 차단되었기 때문에 아래와 같은 코드가 추가됩니다.

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