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

So verwenden Sie Swiper in vue.js

coldplay.xixi
Freigeben: 2020-11-10 13:53:32
Original
1980 Leute haben es durchsucht

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
Nach dem Login kopieren

2 herunter vorstellen swiper.js

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

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage