vue-awesome-swiper 캐러셀 플러그인(코드) 사용 방법

이 글의 내용은 vue-awesome-swiper 캐러셀 플러그인(코드)을 사용하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 좋을 것 같습니다. .

모바일 단말기 캐러셀 플러그인, 터치 슬라이딩을 구현하기 위해 iview 그래픽 인터페이스 플러그인의 캐러셀 구성요소를 사용한 후 vue-awesome-swiper 플러그인으로 전환했습니다

# 🎜🎜#1.npm 설치

npm i vue-awesome-swiper -S

여기에 설치한 것은 다음 버전입니다

2. #🎜🎜 #

글로벌 가져오기:

• import Vue from 'vue'
  import vueSwiper from 'vue-awesome-swiper'
  /* 样式的话，我这里有用到分页器，就在全局中引入了样式 */
  import 'swiper/dist/css/swiper.css'
  Vue.use(vueSwiper);

구성요소 소개#🎜🎜 사용 ## #####rreee#🎜🎜 ## ## ######### #####

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
  swiper,
  swiperSlide
},

#🎜🎜 ## ## ## ## 🎜 🎜 #

데이터 구성

# 🎜 🎜#

<swiper>
  <swiper-slide>
    <img  alt="vue-awesome-swiper 캐러셀 플러그인(코드) 사용 방법" >
  </swiper-slide>
  <!-- 常见的小圆点 -->
  <p></p>
</swiper>
<!-- 显示数字 -->
<p>{{imgIndex}}/{{detailimages.length}}</p>

3. 발생한 문제

이 플러그인은 사진이 하나만 있는 경우에도 자동으로 스크롤됩니다

여기서 한 가지 주의할 점은 직접 자동 재생을 true로 설정하면 슬라이딩 그림을 터치한 후 더 이상 자동으로 스크롤이 되지 않는다는 점입니다.

data() {
    const that = this;
    return {
      imgIndex: 1,
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},

# 🎜 🎜#에 있어서, SlideChangeTransitionStart 메소드를 들을 때 처음에는 activeIndex를 사용하여 해당 인덱스 값을 설정했는데, 이 경우에는 다음 페이지로 슬라이드할 때 문제가 발견되지 않았습니다. 나중에 이전 페이지로 슬라이드를 시도했습니다. 페이지 사진에서 문제를 발견했습니다. 이 값은 일치하지 않습니다. realIndex

• /* 这里我是在使用接口请求后，对返回的数据进行判断 */
  created() {
    this.$Request({
      url: '',
      method: 'get',
      success: res => {
        this.swiperOption.autoplay = res.result.data.length != 1 ? {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false
          } : false;
       }
    })
  }

스와이프 컨테이너에서 It으로 스크롤하세요. 마지막 사진 이후 자동으로 스크롤이 안되고, 글을 쓴 후 하단의 작은 점이 표시되지 않는 문제가 있습니다

• 이유는 this.commodity에 방금 시작했습니다. 데이터는 []이고 할당 후에 값을 얻을 것이므로 먼저 this.commodity가 비어 있는지 확인해야 합니다. 여기서 판단은 swiper 컨테이너에서 이루어집니다. 표시되지 않음

  on: {
     slideChangeTransitionStart: function() {
        that.imgIndex = this.realIndex + 1;
     },
  },

  #🎜 🎜#관련 권장 사항:

vue에서 swiper carousel 플러그인을 사용하여 캐러셀 이미지를 구현하는 방법(코드 분석)

vue-awesome-swiper 플러그인에 대한 질문

위 내용은 vue-awesome-swiper 캐러셀 플러그인(코드) 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!