Swiper在Vue2中的簡(jiǎn)單使用方法
更新時(shí)間：2023年11月10日 11:24:48 作者：iaz999
這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡(jiǎn)單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過(guò)代碼示例介紹的非常詳細(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>注意分頁(yè)器的寫(xiě)法
2.6.7版本
swiperOption: {
loop: true,//可選選項(xiàng)，開(kāi)啟循環(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 //用戶(hù)操作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失效問(wèn)題
數(shù)據(jù)是寫(xiě)死的時(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中的簡(jiǎn)單使用方法的文章就介紹到這了,更多相關(guān)Vue2使用Swiper內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue 3 作為前端開(kāi)發(fā)中一個(gè)非常流行的框架,在錯(cuò)誤處理方面提供了靈活和強(qiáng)大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯(cuò)誤,包括組件級(jí)的錯(cuò)誤處理、全局錯(cuò)誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下2024-07-07
Vue Element前端應(yīng)用開(kāi)發(fā)之功能點(diǎn)管理及權(quán)限控制
在一個(gè)業(yè)務(wù)管理系統(tǒng)中，如果我們需要實(shí)現(xiàn)權(quán)限控制功能，我們需要定義好對(duì)應(yīng)的權(quán)限功能點(diǎn)，然后在界面中對(duì)界面元素的功能點(diǎn)進(jìn)行綁定，這樣就可以在后臺(tái)動(dòng)態(tài)分配權(quán)限進(jìn)行動(dòng)態(tài)控制了，權(quán)限功能點(diǎn)是針對(duì)角色進(jìn)行控制的，也就是簡(jiǎn)稱(chēng)RBAC（Role Based Access Control）。2021-05-05
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值2023-03-03
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過(guò)一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
最近在學(xué)習(xí)使用vue框架，在使用中遇到了一個(gè)問(wèn)題，查找相關(guān)資料終于找了正確的姿勢(shì)，所以這篇文章主要給大家介紹了關(guān)于在Vue框架中正確引入JS庫(kù)的方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
Vue中定義src在img標(biāo)簽使用時(shí)加載不出來(lái)的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時(shí)加載不出來(lái)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語(yǔ)法糖,父組件通過(guò)給子組件定義ref訪問(wèn)其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
全局API并不在構(gòu)造器里,而是先聲明全局變量或者直接在Vue上定義一些新功能,Vue內(nèi)置了一些全局API,下面這篇文章主要給大家介紹了關(guān)于vue2源碼解析之全局API的相關(guān)資料,需要的朋友可以參考下2022-11-11