快捷導(dǎo)航

Vue中如何實(shí)現(xiàn)輪播圖的示例代碼

更新時(shí)間：2017年07月27日 09:15:04 作者：陳楠酒肆

本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

這個(gè)功能我感覺(jué)在任何項(xiàng)目中都會(huì)涉及到，今天我就把我的實(shí)現(xiàn)方法跟大家分享一下，有不對(duì)的地方還請(qǐng)指出，我好更新。

下面是整體代碼，我把輪播圖單獨(dú)做了一個(gè)組件，大家可以拿來(lái)就用，具體代碼如下：

<template>
  <div class="content">
    <div class="focus">
     <!-- focus begin -->
     <swiper :options="swiperOption">
<!-- map是數(shù)組 這里我們用v-for把數(shù)據(jù)循環(huán)出來(lái) -->
      <swiper-slide v-for="item in map">
       <a :href="item.i_route" rel="external nofollow" target="_blank">![](item.i_url)</a>
     </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
     <!-- focus end -->
     </div>
  </div>
</template>

<script>
//下面我們引用兩個(gè)插件，當(dāng)然，在使用之前請(qǐng)先安裝
//安裝方法：npm install vue-awesome-swiper --save

 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  data() {
   return {
    swiperOption: {
     autoplay: 5000,
     initialSlide: 1,
     loop: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     onSlideChangeEnd: swiper => {
      //console.log('onSlideChangeEnd', swiper.realIndex)
     }
    }
   }
  },
  mounted () {
   this.bannerInfo();
  },
  components: {
   swiper,
   swiperSlide
  },
  methods: {
   //輪播圖初始化
   bannerInfo() {
//通過(guò)接口獲取圖片數(shù)據(jù)
     this.$fetch('get/image/list').then(res => {
      if(res.errCode == 200) {
       this.map = res.errData;
      }
     });
   }
  }
 }

</script>

以上就是實(shí)現(xiàn)輪播圖的全部代碼，有興趣的朋友可以試試看啦，希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)VUE的可以繼續(xù)關(guān)注本站。

您可能感興趣的文章:

相關(guān)文章

vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue中使用postcss-px2rem的兩種方法
這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下
2022-05-05
vue多頁(yè)面配置詳情
這篇文章主要介紹了vue多頁(yè)面配置，單頁(yè)應(yīng)用這個(gè)概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里，我們?cè)陧?yè)面渲染中講了頁(yè)面的局部刷新,而單頁(yè)應(yīng)用則是使用了頁(yè)面的局部刷新的能力,下面來(lái)看看詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
vue中的router-view父子組件傳參方式
這篇文章主要介紹了vue中的router-view父子組件傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue?動(dòng)畫效果、過(guò)渡效果的示例代碼
這篇文章主要介紹了Vue?動(dòng)畫效果、過(guò)渡效果,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-04-04
VueRouter?原理解讀之初始化流程
這篇文章主要為大家介紹了VueRouter原理解讀之初始化流程實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
這篇文章主要介紹了VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問(wèn)題
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件,本文是小編給大家總結(jié)的一些表單插件的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
Vue+tsx使用slot沒(méi)有被替換的問(wèn)題
本文主要介紹了Vue+tsx使用slot沒(méi)有被替換的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
分享vue.js devtools遇到一系列問(wèn)題
這篇文章主要為大家詳細(xì)介紹了vue.js devtools遇到問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10