현재 디스플레이가 1이라고 가정하고, 하나를 왼쪽으로 밀면 1씩 감소하고, 오른쪽으로 밀면 1씩 증가합니다. 다음은 슬라이딩 내용을 동적으로 변경하는 스와이프 구현 방법을 설명하는 예제 코드입니다. 관심있는 친구들은 함께 살펴보실 수 있습니다. 현재 표시가 1이라고 가정하고, 왼쪽으로 슬라이드하면 1씩 감소하고, 오른쪽으로 슬라이드하면 됩니다. 1씩 늘리려면
본문 아래에 다음 코드 추가
<p class="swiper-container temp"> <p class="swiper-wrapper"> <p class="swiper-slide"> 1 </p> <p class="swiper-slide"> 2 </p> <p class="swiper-slide"> 3 </p> </p> </p>
swiper의 css 및 js 스크립트 참조(현재 버전 4.x 이상 사용)
js 스크립트 추가var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
initialSlide: 1,
loop:true,
speed:400,
on: {
slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
var pre_number=Number($(this.slides[now_ActiveIndex]).text());
if(now_ActiveIndex>this.activeIndex){
if(now_ActiveIndex==4&&this.activeIndex==1){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//上一个
var act_number=pre_number-1;
$(this.slides[this.activeIndex]).text(act_number);
}
}else if(now_ActiveIndex<this.activeIndex){
if(now_ActiveIndex==0&&this.activeIndex==3){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//下一个
var act_number=pre_number+1;
$(this.slides[this.activeIndex]).text(act_number);
}
}
now_ActiveIndex=this.activeIndex;
},
},
})
초기값:
왼쪽으로 세 번 스와이프:
오른쪽으로 한 번 스와이프
이 테스트를 하는 주요 목적은 달력을 좌우로 슬라이드하여 이전 달과 다음 달을 변경하는 것입니다
위 내용은 다음과 같습니다. 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련글:
vue에서 페이지 점프 후 원래 페이지의 초기 위치로 돌아가는 방법vue-router를 사용하여 각 페이지의 제목 방법을 설정하는 방법문제 해결 방법 of Vue.js 표시 데이터 페이지가 깜박일 때ajax 요청 + vue.js 렌더링 + 페이지 로딩ajax를 사용하여 vue.js에서 페이지를 렌더링하는 방법위 내용은 스와이퍼를 사용하여 슬라이딩 콘텐츠를 변경하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!