Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Swiper in vue.js

So verwenden Sie Swiper in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-10 13:53:321936Durchsuche

So verwenden Sie Swiper in vue.js: Laden Sie zuerst [swiper.js] herunter, führen Sie dann [swiper.js] global in [main.js] ein und konfigurieren Sie schließlich relevante Inhalte in der Vorlage.

So verwenden Sie Swiper in vue.js

【Empfohlene verwandte Artikel: vue.js

So verwenden Sie Swiper in vue.js:

1. Laden Sie swiper.js

npm install vue-awesome-swiper --save

2 herunter vorstellen swiper.js

  import VueAwesomeSwiper from 'vue-awesome-swiper' 
  import 'swiper/dist/css/swiper.css'
  Vue.use(VueAwesomeSwiper)

3. Konfigurieren Sie relevante Inhalte in der Vorlage

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

Verwandte kostenlose Lernempfehlungen: JavaScript (Video)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Swiper in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn