VUE 3D輪播圖封裝實(shí)現(xiàn)方法
本文為大家分享了VUE 3D輪播圖封裝的具體代碼,供大家參考,具體內(nèi)容如下
一、體驗(yàn)地址
二、實(shí)現(xiàn)功能點(diǎn)
(1)、無(wú)縫輪播
(2)、進(jìn)入變大、離開(kāi)縮?。?lèi)3d切換效果)
三、js代碼
<!--輪播圖插件模板--> <template> </template> <script type="text/ecmascript-6"> import {swiper, swiperSlide} from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css');//注意這里 import Pageination from "./pageination" import { mapActions, mapMutations, mapGetters, mapState} from "vuex" import {getPriceSymbolValue} from '../../util/tool/index' export default { //props: ['bannerList'], data() { let _self=this; return { pageinationIndex:0, data: { "bannerList":[] }, swiperOption: { loop: true, // 循環(huán) speed:500, //切換速度 mousewheelControl: false,// 禁止鼠標(biāo)滾輪切換 lazy: { loadPrevNext: true, }, pagination: { el: '.swiper-pagination', }, autoplay: { delay:2000, stopOnLastSlide: false, // 切換到最后一個(gè)時(shí)不停止 disableOnInteraction: false, //用戶(hù)操作swiper之后 不停止autoplay }, watchSlidesProgress:true, centeredSlides: true, //設(shè)定為true時(shí),活動(dòng)塊會(huì)居中,而不是默認(rèn)狀態(tài)下的居左。 spaceBetween:10, slidesPerView: 1.7, loopedSlides :2, observer: true, observeParents: true } } }, methods: { }, mounted() { // 這邊就可以使用swiper這個(gè)對(duì)象去使用swiper官網(wǎng)中的那些方法 // this.$nextTick(function() { // this.swiper.slideTo(3, 10, false); // }); }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, components: { swiper, swiperSlide, Pageination } } </script> <style lang="scss" type="text/scss"> </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue swipe自定義組件實(shí)現(xiàn)輪播效果
這篇文章主要為大家詳細(xì)介紹了vue swipe自定義組件實(shí)現(xiàn)輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例
本篇文章主要介紹了vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用
這篇文章主要介紹了vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用,需要的朋友可以參考下2019-04-04vue實(shí)現(xiàn)搜索并高亮文字的兩種方式總結(jié)
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,常見(jiàn)的實(shí)現(xiàn)方式有插入標(biāo)簽和貼標(biāo)簽兩種,這兩種方式適用于不同的場(chǎng)景,各有優(yōu)劣,下面我們就來(lái)看看他們的具體實(shí)現(xiàn)吧2023-11-11