詳解swiper在vue中的應(yīng)用(以3.0為例)
一、使用方法
二、常見情況
圖片需要?jiǎng)討B(tài)獲取時(shí)
待數(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 組圖片需要依次播放時(shí)(多組以此類推)
情景:第 2 組圖片滑動(dòng)最后一張時(shí),需要加載第 3 組圖片;第 2 組圖片滑動(dòng)第一張時(shí),需要加載第 1 組圖片。
方法:在初始化的時(shí)候,配置回調(diào)函數(shù)onTouchStart(開始滑動(dòng)的X軸值)和 onTouchEnd(結(jié)束滑動(dòng)的X軸值)。用差值來判斷是往前滑還是往后劃。
this.$nextTick(() => { let mySwiper = new Swiper(".swiper-container", { observer: true, //修改swiper自己或子元素時(shí),自動(dòng)初始化swiper observeParents: true, //修改swiper的父元素時(shí),自動(dòng)初始化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) { //向前劃,加載前一組圖片 } } }); });
這時(shí),圖片已經(jīng)加載了另外一組圖片,但是各組圖片之間沒有連貫起來,這就需要用到 slideTo方法去跳轉(zhuǎn)(若加載第 3 組,則跳轉(zhuǎn)到下標(biāo)第 0 個(gè);若加載第 1 組,則跳轉(zhuǎn)到下標(biāo)第 圖片個(gè)數(shù)-1 個(gè))。
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是一個(gè)組件自有屬性,如果notNextTick設(shè)置為true,組件則不會(huì)通過NextTick來實(shí)例化swiper,也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象,假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來做什么事,那么這個(gè)屬性一定要是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è)計(jì)了插件,那么插件的一些配置相關(guān)參數(shù),也應(yīng)該出現(xiàn)在這個(gè)對(duì)象中,如下debugger // debugger: true, // swiper callbacks // swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個(gè)對(duì)象中,和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對(duì)象來做一些事情,你可以像下面這樣定義一個(gè)方法屬性來獲取當(dāng)前的swiper對(duì)象,同時(shí)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對(duì)象去做你想做的事了 // console.log('this is current swiper instance object', this.swiper) // this.swiper.slideTo(3, 1000, false) } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
- 移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解
- vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁效果【推薦】
- 解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問題
- 解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問題
- Vue框架里使用Swiper的方法示例
- swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
- vue中引用swiper輪播插件的教程詳解
- vue使用原生swiper代碼實(shí)例
相關(guān)文章
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下2022-11-11Vue3+Elementplus實(shí)現(xiàn)面包屑功能
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-11-11vue router點(diǎn)擊打開新的標(biāo)簽頁的方法(最新推薦)
vue router點(diǎn)擊打開新的標(biāo)簽頁的方法,只需要在router-link中加入target="_blank"即可在新的頁面打開標(biāo)簽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10