> 웹 프론트엔드 > View.js > vue.js에서 스와이프를 사용하는 방법

vue.js에서 스와이프를 사용하는 방법

coldplay.xixi
풀어 주다: 2020-11-10 13:53:32
원래의
1979명이 탐색했습니다.

vue.js에서 swiper를 사용하는 방법: 먼저 [swiper.js]를 다운로드한 다음 [main.js]에 전역적으로 [swiper.js]를 도입합니다.

vue.js에서 스와이프를 사용하는 방법

【추천 관련 글: vue.js

vue.js에서 swiper 사용 방법:

1 swiper.js를 글로벌하게 다운로드

npm install vue-awesome-swiper --save
로그인 후 복사

2. swiper.js

  import VueAwesomeSwiper from 'vue-awesome-swiper' 
  import 'swiper/dist/css/swiper.css'
  Vue.use(VueAwesomeSwiper)
로그인 후 복사

3. 템플릿

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="item in imglist">
      <img :src="rootLink+ &#39;/resources/img/&#39; + item.imgPath"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import axios from &#39;axios&#39;
export default {
  name: &#39;carrousel&#39;,
  data() {
    return {
      rootLink: &#39;http://119.23.28.239:8080&#39;,
      imglist:[],
      swiperOption: {
        autoplay: 3000,  //l轮播间隔时间
        loop: true,  //是否自动轮播
        pagination : &#39;.swiper-pagination&#39;, //轮播图中下标点显示
        paginationClickable :true   //轮播图中下标点显示
      }
     }
  },
  mounted() {
    var vm = this;
    axios.get(vm.rootLink + &#39;/train/homePage/banner?type=上面&#39;)
    .then(function (data) {
      vm.imglist = data.data.data
    })
  }
}
</script>
로그인 후 복사

에서 관련 콘텐츠를 구성하세요. 관련 무료 학습 권장사항: JavaScript(동영상)

위 내용은 vue.js에서 스와이프를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿