您好,登錄后才能下訂單哦!
使用Vue怎么實現(xiàn)一個從小到大的橫向滑動效果?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
第一步:下載插件vue-awesome-swiper
可以在命令行直接下載,下載命令:npm install vue-awesome-swiper --save,進行全局保存,下載完成后查看一下你下載的版本,我下載后版本是3.1.3,不同的版本之間可能使用上會有一點細(xì)微的差別,可以參考官方文檔。
第二步:在vue文件中引入插件
第一步安裝成功后,插件就可以在vue中使用啦,在這里有兩種引入方法。
第一種,全局引入
打開main.js文件,在里面加入以下代碼,這樣在后面開發(fā)單獨的vue文件的時候,就不需要再去單獨導(dǎo)入了,這里路徑是固定的,直接復(fù)制就可以,這里的common.css是自己實現(xiàn)的,這個文件的用處后面講。
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' import '../src/assets/common.css' Vue.use(VueAwesomeSwiper);
第二種,局部插件引入
局部引入的話,就在你自己的vue文件中引入就可以了,引入方法如下:
說明:是否需要引入css文件需要看下載插件版本,如果是3以上,是不需要單獨引入css文件的,如果是3以下,需要單獨引入。
import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }
第三步:單獨開發(fā)swiper的vue控件(這里以全局引入的方法為例) BannerSwiper.vue
<template> <!--滑動banner --> <div class="swiperbanner_container"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid"> <img :src="item.imgurl" class="banner_img"> </swiper-slide> </swiper> <div class="swiper-pagination"></div> </div> </template> <script> import bannerurl1 from '../../assets/mall/banner.png' import bannerurl2 from '../../assets/smart/holiday.png' import bannerurl3 from '../../assets/smart/leave_home.png' export default { name: "SwiperBanner", data() { return { swiperOption:{ direction:'horizontal', spaceBetween:10, observeParents: true, //觀察父組件,當(dāng)父組件變化時,自己隨著變化 observer: true, //觀察自己,自己的參數(shù)變化時,更新 centeredSlides:true, //設(shè)置為true時,活動塊居中顯示,默認(rèn)下居左顯示 loop:true, //滑動過程中會在前后復(fù)制多個slider,效果看起來是循環(huán)的 loopedSlides:3, //設(shè)置滑動過程中所要用到的loop個數(shù) slidesPerView:'auto', //同時顯示的slide數(shù)量 loopAdditionalSlides:100, autoPlay:{ delay:3000, disableOnInteraction:false //鼠標(biāo)移動上去時是否繼續(xù)播放 }, pagination : '.swiper-pagination', paginationType : 'bullets', paginationElement:'span' } } }, props:{ BannerList:{ type:Array, default:function(){ return [ { bannerid:0, imgurl:bannerurl1, bannerlink:'' },{ bannerid:1, imgurl:bannerurl2, bannerlink:'' },{ bannerid:2, imgurl:bannerurl3, bannerlink:'' } ] } } }, methods: { }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted() { console.log('this is current swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false); } } </script> <style scoped> .swiperbanner_container{ width:100%; height:160px; overflow: visible !important; } .swiper-pagination{ bottom:2px !important; } .banner_img{ width:100%; height:116px; } </style>
需要使用到的參數(shù)可以在官方文檔中看到具體的含義,點擊鏈接自行查看。
這里有兩個參數(shù)需要特別注意:
spaceBetween:10
這個參數(shù)用于設(shè)置兩個slide之間的間隙,可根據(jù)自己的項目動態(tài)修改
observeParents: true
observer: true
觀察父組件,當(dāng)父組件變化時,自己動態(tài)改變,剛開始開發(fā)的時候我沒有設(shè)置這個變量,發(fā)現(xiàn)滑動的時候特別不流暢,感覺就是普通的滑動效果,無法劃一下就跳到下一個完整的slide上去就是因為這個變量沒有設(shè)置,所以非常重要。
第四步,在需要的文件中引用它,并給他傳值,這里不多說,沒什么特殊性,和普通的引用方法一樣。
第五步,單獨實現(xiàn)css樣式。
經(jīng)過了前四步以后,其實還不能完全實現(xiàn)效果圖中的樣子,我們還需要手動去修改插件中提供的樣式。因為我是全局引入,所以修改的樣式就放在剛開始說的common.css中。
common.css的內(nèi)容如下:
/**重寫swiper-slider的屬性**/ .swiper-slide{ width:85%; /*margin-left: 5px;*/ /*margin-right: 5px;*/ } .swiper-slide-active>img{ height:136px !important; } .swiper-slide-prev,.swiper-slide-next{ margin-top:10px; }
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。