Swiper在Vue2中的簡單使用方法
更新時(shí)間：2023年11月10日 11:24:48 作者：iaz999
這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
以swiper3為例
一、全局引入
1. 下載swiper3
cnpm install swiper@3 vue-awesome-swiper@3 --save-dev
2. 在main.js中引入Vue-Awesome-Swiper
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' // 全局掛載 Vue.use(VueAwesomeSwiper)
3. 在swiper.vue中
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'，
clickable: true
}，
}
}
}
}
</script>
<style lang="scss" scoped></style>注意分頁器的寫法
2.6.7版本
swiperOption: {
loop: true,//可選選項(xiàng)，開啟循環(huán)
autoplay: 5000,//可選選項(xiàng)，自動(dòng)滑動(dòng)
pagination: '.swiper-pagination',
paginationType: 'fraction',
paginationClickable: true
}3.1.3版本
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: true, //當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換
disableOnInteraction: true //用戶操作swiper之后，是否禁止autoplay
},
pagination: {
el: '.swiper-pagination',
type: 'fraction',
clickable: true
}
}二、按需引入
1. 下載swiper3
cnpm install swiper@3 vue-awesome-swiper@3 --save-dev
2. 在swiper.vue中 引入樣式和組件
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: 'HomeSwiper',
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
}
}
</script>
<style lang="scss" scoped></style>loop: true失效問題
數(shù)據(jù)是寫死的時(shí)候，能夠loop:true是有效的;
數(shù)據(jù)是動(dòng)態(tài)獲取的loop:true就會(huì)失效。
解決辦法：
加上v-if="list.length"有效解決
computed: {
isShowSwiper () {
return this.list.length
}
}總結(jié)
到此這篇關(guān)于Swiper在Vue2中的簡單使用方法的文章就介紹到這了,更多相關(guān)Vue2使用Swiper內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家分享了一個(gè)寫給vue新手看的vue渲染頁面教程，文中通過圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，感興趣的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能,開始時(shí)間、結(jié)束時(shí)間可配置，根據(jù)當(dāng)前時(shí)間初始化位置，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了eslint在vue中如何使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue-manage-system升級(jí)到vue3的開發(fā)總結(jié)分析
這篇文章主要為大家介紹了vue-manage-system升級(jí)到vue3的開發(fā)總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue中常用rules校驗(yàn)規(guī)則(實(shí)例代碼)
這篇文章主要介紹了Vue中常用rules校驗(yàn)規(guī)則，本文通過實(shí)例代碼個(gè)大家介紹了一些校驗(yàn)方法,需要的朋友可以參考下2019-11-11
手寫Vue源碼之?dāng)?shù)據(jù)劫持示例詳解
這篇文章主要給大家介紹了手寫Vue源碼之?dāng)?shù)據(jù)劫持的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 組件注冊(cè),結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js組件的常見分類、注冊(cè)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法
最近在工作中遇到了些問題,總結(jié)下分享給同樣遇到這個(gè)問題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個(gè)示例中,我們使用了一個(gè)backgroundColor變量來存儲(chǔ)當(dāng)前頁面的背景顏色,當(dāng)用戶點(diǎn)擊按鈕時(shí),我們通過調(diào)用setBackgroundColor方法來更改背景顏色,并將背景顏色同時(shí)應(yīng)用于body元素,需要的朋友可以參考下2024-03-03