VUE中實作輪播圖——Swiper vue-awesome-swiper 插件應用【詳細步驟】
文章目錄
- 前言
- 一、Swiper是什么？
- 二、使用步驟
- 1.安裝
- 2.在VUE中引入swiper
- 3.在VUE中使用swiper
- 4.優化與改進：使用v-for顯示輪播圖
前言
Swiper(Swiper master)是目前應用較廣泛的移動端網頁觸摸內容滑動js插件，是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端；能實作觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果，本文將從介紹什么是Swiper插件，以及Swiper插件的使用方法等方面進行講述如何在VUE專案中實作輪播圖，
一、Swiper是什么？
Swiper(Swiper master)是目前應用較廣泛的移動端網頁觸摸內容滑動js插件，是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端；能實作觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果，
swiper是第一個第三方的庫，可以用來實作移動端、pc端的滑動操作，十分方便
官方檔案： https://www.swiper.com.cn/
在GitHub上參考安裝和使用對策教程
網址：https://github.com/surmon-china/vue-awesome-swiper
二、使用步驟
1.安裝
因為老版本會比新的更加穩定， 在這里我們就安裝2.6.7這個版本
npm install swiper vue-awesome-swiper@2.6.7 --save
2.在VUE中引入swiper
我們要在main.js 中添加這兩行代碼引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
3.在VUE中使用swiper
首先看一下我們的目錄結構：
在home這個檔案夾下面有components檔案夾，以及Home.vue這個檔案，
顯而易見，我們需要使用到組件間的參考，在Home.vue參考swiper.vue這個子組件，
在GitHub上參考教程是這樣寫的
當然如果直接這樣寫的話，輪播的不是圖片，而是數字，所以在這里我也做了一些小調整，
其實就是在<swiper-slide></swiper-slide>加一個img標簽/
直接上Swiper.vue 的代碼：
html部分：
<template>
<div class="wrapper">
<swiper :options="swiperOptions">
<swiper-slide>
<img class="swiper-img" src="./img/1.jpg"/>
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="./img/2.jpg"/>
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="./img/3.jpg"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
js部分
export default {
name:'HomeSwiper',
data(){
return{
swiperOptions:{
pagination:'.swiper-pagination',
},
}
}
}
當然，也別忘記我們要在Home.vue中引入
Home.vue html部分
<template>
<div >
<home-swiper></home-swiper>
</div>
</template>
js部分
import HomeSwiper from './components/Swiper'
export default {
name: 'Home',
components :{
HomeSwiper
},
}
4.優化與改進：使用v-for顯示輪播圖
像我們一開始方法，是寫死的，也不方便修改或者添加圖片，我們可以使用v-for進行改進與優化，其實就是把圖片的地址用一個物件陣列存起來，回圈加載img標簽中的圖片地址，
值得注意的時候，我們在存地址的時候要加上require（）這個函式，
詳細內容可參考：https://www.cnblogs.com/SamWeb/p/8519735.html
html部分
<div class="wrapper">
<swiper :options="swiperOptions">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
js部分
export default {
name:'HomeSwiper',
data(){
return{
swiperOptions:{
pagination:'.swiper-pagination',
},
swiperList:[
{
id:'0001',
imgUrl:require('./img/1.jpg'),
},
{
id:'0002',
imgUrl:require('./img/2.jpg'),
},
{
id:'0003',
imgUrl:require('./img/3.jpg'),
}
],
}
}
}
好啦～恭喜你！一個可愛的輪播圖就做好啦～(///▽///) ～
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263468.html
標籤：其他