詳解swiper在vue中的應(yīng)用(以3.0為例)
一、使用方法
二、常見情況
圖片需要動態(tài)獲取時
待數(shù)據(jù)加載成功且渲染完畢后,進(jìn)行節(jié)點(diǎn)初始化。例:
axios.post(‘接口地址', 參數(shù)).then(response => {
this.pages = response.data; //pages 渲染數(shù)據(jù)的數(shù)組
this.$nextTick(() => { //渲染結(jié)束
// mySwiper 里面的屬性按需配置,詳情見官網(wǎng)
let mySwiper = new Swiper(".swiper-container", {
initialSlide :0,//默認(rèn)播放(值為圖片下標(biāo))
loop: false,//不循環(huán)
speed: 600, //切換速度
paginationClickable: true, //點(diǎn)擊小點(diǎn)可以切換
});
});
});
當(dāng)有 3 組圖片需要依次播放時(多組以此類推)
情景:第 2 組圖片滑動最后一張時,需要加載第 3 組圖片;第 2 組圖片滑動第一張時,需要加載第 1 組圖片。
方法:在初始化的時候,配置回調(diào)函數(shù)onTouchStart(開始滑動的X軸值)和 onTouchEnd(結(jié)束滑動的X軸值)。用差值來判斷是往前滑還是往后劃。
this.$nextTick(() => {
let mySwiper = new Swiper(".swiper-container", {
observer: true, //修改swiper自己或子元素時,自動初始化swiper
observeParents: true, //修改swiper的父元素時,自動初始化swiper
onTouchStart: function(swiper) {
this.positionStart = swiper.getWrapperTranslate();
},
onTouchEnd: function(swiper) {
this.positionEnd = swiper.getWrapperTranslate();
if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) {
//向后滑,加載后一組圖片
} else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
//向前劃,加載前一組圖片
}
}
});
});
這時,圖片已經(jīng)加載了另外一組圖片,但是各組圖片之間沒有連貫起來,這就需要用到 slideTo方法去跳轉(zhuǎn)(若加載第 3 組,則跳轉(zhuǎn)到下標(biāo)第 0 個;若加載第 1 組,則跳轉(zhuǎn)到下標(biāo)第 圖片個數(shù)-1 個)。
mySwiper.slideTo('要跳轉(zhuǎn)的圖片下標(biāo)', 10, false) // 10表示跳轉(zhuǎn)速度;false 代表是否觸發(fā)回到函數(shù)
數(shù)據(jù)方法配置
export default {
name: '',
data() {
return {
swiperOption: {
// NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
// notNextTick是一個組件自有屬性,如果notNextTick設(shè)置為true,組件則不會通過NextTick來實(shí)例化swiper,也就意味著你可以在第一時間獲取到swiper對象,假如你需要剛加載遍使用獲取swiper對象來做什么事,那么這個屬性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,
// direction : 'vertical',
effect:"coverflow",
grabCursor : true,
setWrapperSize :true,
// autoHeight: true,
// paginationType:"bullets",
pagination : '.swiper-pagination',
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
// scrollbar:'.swiper-scrollbar',
mousewheelControl : true,
observeParents:true,
// if you need use plugins in the swiper, you can config in here like this
// 如果自行設(shè)計了插件,那么插件的一些配置相關(guān)參數(shù),也應(yīng)該出現(xiàn)在這個對象中,如下debugger
// debugger: true,
// swiper callbacks
// swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個對象中,和swiper官方一樣
// onTransitionStart(swiper){
// console.log(swiper)
// },
// more Swiper configs and callbacks...
// ...
}
}
},components: {
swiper,
swiperSlide
},
// you can find current swiper instance object like this, while the notNextTick property value must be true
// 如果你需要得到當(dāng)前的swiper對象來做一些事情,你可以像下面這樣定義一個方法屬性來獲取當(dāng)前的swiper對象,同時notNextTick必須為true
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// you can use current swiper instance object to do something(swiper methods)
// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對象去做你想做的事了
// console.log('this is current swiper instance object', this.swiper)
// this.swiper.slideTo(3, 1000, false)
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
- 移動端滑動切換組件封裝 vue-swiper-router實(shí)例詳解
- vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動翻頁效果【推薦】
- 解決Vue中引入swiper,在數(shù)據(jù)渲染的時候,發(fā)生不滑動的問題
- 解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題
- Vue框架里使用Swiper的方法示例
- swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法
- vue中引用swiper輪播插件的教程詳解
- vue使用原生swiper代碼實(shí)例
相關(guān)文章
vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題
這篇文章主要介紹了vant遇到van-sidebar數(shù)據(jù)超出不能滑動的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
如何在 Vite 項目中自動為每個 Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實(shí)現(xiàn)自動導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新詳解
這篇文章主要為大家介紹了vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
教你用vue實(shí)現(xiàn)一個有趣的圍繞圓弧動畫效果
最近做的兩個項目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個有趣的圍繞圓弧動畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點(diǎn),使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
Vue.js第一天學(xué)習(xí)筆記(數(shù)據(jù)的雙向綁定、常用指令)
這篇文章主要為大家分享了Vue.js第一天的學(xué)習(xí)筆記,包括數(shù)據(jù)的雙向綁定、常用指令學(xué)習(xí),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12

