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