基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
一般做移動(dòng)端輪播圖的時(shí)候,最常用的就是Swiper插件了,而vue.js也有一個(gè)輪播組件vue-awesome-swiper,用法跟swiper相似。
1.安裝vie-awesome-swiper
nam install vue-awesome-swiper --save-dev
2.引用vie-awesome-swiper組件,這里我是用vie-cli創(chuàng)建的項(xiàng)目,在main.js:
import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.use(VueAwesomeSwiper) //記得不要忘記這句
3.Home.vue下使用
<template> <div> <swiper :options="swiperOption" ref="mySwiperA"> <!-- 幻燈內(nèi)容 --> <swiper-slide>slide1</swiper-slide> <swiper-slide>slide2</swiper-slide> <!-- 以下控件元素均為可選 --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </div> </template> <script> export default{ data(){ return { swiperOption: { // 所有配置均為可選(同Swiper配置) notNextTick: true, autoplay: 3000, grabCursor : true, setWrapperSize :true, autoHeight: true, pagination : '.swiper-pagination', paginationClickable :true, prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', scrollbar:'.swiper-scrollbar', mousewheelControl : true, observeParents:true, onTransitionStart(swiper){ console.log(swiper) } } } }, computed: { swiper() { return this.$refs.mySwiperA.swiper } }, mounted() { console.log("每次切換都會(huì)觸發(fā)我"); this.swiper.slideTo(3, 1000, false) } } </script>
以上所述是小編給大家介紹的基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue3+vite+ts使用require.context問(wèn)題
這篇文章主要介紹了vue3+vite+ts使用require.context問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05關(guān)于vue data中的this指向問(wèn)題
這篇文章主要介紹了關(guān)于vue data中的this指向問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue.js 動(dòng)態(tài)為img的src賦值方法
下面小編就為大家分享一篇Vue.js 動(dòng)態(tài)為img的src賦值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù),本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能,感興趣的小伙伴們可以參考一下2021-05-05vue 父組件通過(guò)v-model接收子組件的值的代碼
這篇文章主要介紹了vue 父組件通過(guò)v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08