前言

swiper

開源、免費、強大的滑動插件。

swiper中文網

https://www.swiper.com.cn/

Swiper4中文API

https://www.swiper.com.cn/api/index.html

Vue-Awesome-Swipwe

基于Swiper、適用于Vue的輪播組件，支持服務端和單頁引用。

插件npm

https://www.npmjs.com/package/vue-awesome-swiper

在線demo

https://surmon-china.github.io/vue-awesome-swiper/

效果

場景

home.vue是仿音樂播放器的主頁面，在home界面引入了Swiper_Banner.vue這個組件用來實現輪播圖。

在Swiper_Banner.vue，滾動的圖片已經寫死，放在assets下的img目錄下。

項目目錄結構

實現

1.安裝vue-awesome-swiper插件

項目根目錄下打開命令行輸入：

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

2.home.vue中引入Swiper_Banner.vue組件

打開home.vue

引入組件

import SwiperBanner from "../components/Swiper_Banner"

其中../表示上級目錄。

注入組件

export default {name:"home",components:{SwiperBanner} }

引用組件

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div> </template>

home.vue 完整代碼

<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div> </template><script> import TodayRecommend from "../components/Today_Recommend" import NewsMusic from "../components/News_Music" import SwiperBanner from "../components/Swiper_Banner" export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner} } </script><style lang="css"> </style>

3.在Swiper_Banner.vue中配置輪播圖

打開輪播圖組件Swiper_Banner.vue

首先引入swiper以及swiper的樣式文件

（局部注冊：參照：https://www.npmjs.com/package/vue-awesome-swiper）

import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'

進行組件引入聲明

?

components: {swiper,swiperSlide}

頁面添加swiper組件元素

參照：

https://www.npmjs.com/package/vue-awesome-swiper

下的SPA:

<!-- The ref attr used to find the swiper instance --> <template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides --><swiper-slide>I'm Slide 1</swiper-slide><swiper-slide>I'm Slide 2</swiper-slide><swiper-slide>I'm Slide 3</swiper-slide><swiper-slide>I'm Slide 4</swiper-slide><swiper-slide>I'm Slide 5</swiper-slide><swiper-slide>I'm Slide 6</swiper-slide><swiper-slide>I'm Slide 7</swiper-slide><!-- Optional controls --><div class="swiper-pagination"? slot="pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar"?? slot="scrollbar"></div></swiper> </template><script>export default {name: 'carrousel',data() {return {swiperOption: {// some swiper options/callbacks// 所有的參數同 swiper 官方 api 參數// ...}}},computed: {swiper() {return this.$refs.mySwiper.swiper}},mounted() {// current swiper instance// 然后你就可以使用當前上下文內的swiper對象去做你想做的事了console.log('this is current swiper instance object', this.swiper)this.swiper.slideTo(3, 1000, false)}} </script>

這里只要分頁器，別的屬性不配置，

配置參數參照官方API參數：

https://www.swiper.com.cn/api/pagination/362.html

此處為：

<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination"? slot="pagination"></div></swiper></div> </template>

配置swiper組件屬性

export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分頁器},autoplay:{delay:1000,//間隔一秒滾動一次}//自動滾動}}},

Swiper_Banner.vue完整代碼

<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination"? slot="pagination"></div></swiper></div> </template><script>import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分頁器},autoplay:{delay:1000,//間隔一秒滾動一次}//自動滾動}}},components: {swiper,swiperSlide} } </script><style scoped>.banner{padding: 10px; }</style>

?

?

?

?

?

總結

以上是生活随笔為你收集整理的快速入门在Vue中使用滑动插件Swiper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。