解決使用vue-awesome-swiper組件手動滾動點擊失效問題
問題
最近做了一個項目用了vue-awesome-swiper這個組件,遇到了一個問題。
就是vue引入swiper后,使用loop循環(huán),然后給每個swiper-slide滑塊綁定事件@click='fn()' ,由于是循環(huán)模式,swiper會復(fù)制兩份swiper-slide滑塊做循環(huán)的效果,但是這兩份復(fù)制的滑塊點擊效果無效,其它的正常。
廢話不多說 上代碼
問題代碼
這是把點擊事件綁定在dom上
在 loop 開啟的時候,dom 綁定事件是有問題的。因為在loop模式下slides前后會復(fù)制若干個slide,從而形成一個環(huán)路,但是卻不會復(fù)制綁定在dom上的click事件。
因此只能使用 swiper 提供的 api 方法進行解決
解決方案
html
js
<script> import { swiper, swiperSlide } from "vue-awesome-swiper"; var vm = null; export default { data() { return { swiperOption: { notNextTick: true, //循環(huán) loop: true, //設(shè)定初始化時slide的索引 initialSlide: 0, //自動播放 autoplay: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false, }, // 設(shè)置輪播 effect: '', //滑動速度 speed: 800, //滑動方向 direction: 'horizontal', //小手掌抓取滑動 // grabCursor : true, //滑動之后回調(diào)函數(shù) on: { slideChangeTransitionEnd: function() { console.log(this.activeIndex); //切換結(jié)束時,告訴我現(xiàn)在是第幾個slide // const realIndex = this.activeIndex; // vm.carousel(realIndex); }, click: function() { // 這里有坑,需要注意的是:this 指向的是 swpier 實例,而不是當(dāng)前的 vue, 因此借助 vm,來調(diào)用 methods 里的方法 // console.log(this); // -> Swiper // 當(dāng)前活動塊的索引,與activeIndex不同的是,在loop模式下不會將 復(fù)制的塊 的數(shù)量計算在內(nèi)。 console.log('ss'+this.realIndex) const realIndex = this.realIndex; vm.carousel(vm.carousels[realIndex]); } }, //左右點擊 // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev', // }, //分頁器設(shè)置 pagination: { el: '.swiper-pagination', clickable: true } }, swiperSlides: [1, 2, 3, 4], activeIndex: 0, carousels:[] } }, components: { swiper, swiperSlide }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, created() { vm = this; }, methods: { carousel(type) { if (type.url !== null) { this.$router.push(type.redirect_to); } } } }
如上圖js里定義一個全局的變量vm,為了在swiper的AIP中調(diào)用vue的方法和綁定的數(shù)據(jù), 這時候就可以解決點擊事件失效的問題了!
以上就是解決使用vue-awesome-swiper組件手動滾動點擊失效問題的詳細(xì)內(nèi)容,更多關(guān)于vue-awesome-swiper滾動點擊的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決iview table組件里的 固定列 表格不自適應(yīng)的問題
這篇文章主要介紹了解決iview table組件里的 固定列 表格不自適應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue之el-tree懶加載數(shù)據(jù)并且實現(xiàn)樹的過濾問題
這篇文章主要介紹了vue之el-tree懶加載數(shù)據(jù)并且實現(xiàn)樹的過濾問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04vue-router實現(xiàn)組件間的跳轉(zhuǎn)(參數(shù)傳遞)
這篇文章主要為大家詳細(xì)介紹了vue-router實現(xiàn)組件間的跳轉(zhuǎn),參數(shù)傳遞方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決
這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10