關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法
項(xiàng)目背景
場(chǎng)景：需要在swiper中每個(gè)輪播項(xiàng)中展示包含不同的echarts,并開啟loop:true循環(huán)
swiper: 5.3.6
vue-awesome-swiper: 4.0.4
echarts: 5.2.1
問(wèn)題一
開啟loop:true, 首先遇到echarts失效不能正常渲染的問(wèn)題，果斷百度發(fā)現(xiàn)是因?yàn)殚_啟loop:true時(shí)，swiper會(huì)在前后復(fù)制同樣的slide保證循環(huán)效果，這樣以來(lái)初始化時(shí)使用的ID就不是唯一的了，導(dǎo)致echarts初始化無(wú)效了。
解決辦法
// 通過(guò)class獲取dom，并在循環(huán)時(shí)初始化，為了保證echarts初始化時(shí)dom已經(jīng)更新渲染，加一個(gè)setTimeout函數(shù)
?setTimeout(() => {
?// 解決繪圖復(fù)制出來(lái)的echarts沒有顯示的問(wèn)題
? const myEchart = document.getElementsByClassName('liquidfill')
? let chart = null
? for (const item of myEchart) {
? ? ? item.setAttribute('_echarts_instance_', '')
? ? ? chart = echarts.init(item)
? ? ? chart.setOption(option)
? }
})問(wèn)題二
- 當(dāng)我沉浸在剛才解決的顯示問(wèn)題被解決的喜悅之中時(shí)，嘩。。。一盆涼水襲面而來(lái)，echarts包括標(biāo)簽上的點(diǎn)擊事件竟然失效了，當(dāng)然不是所有的都失效，但也很*疼啊，查找資料后發(fā)現(xiàn)和第一個(gè)問(wèn)題類似，同樣slide復(fù)制后click事件并沒有每一個(gè)都綁定，導(dǎo)致點(diǎn)擊失效。
- 解決辦法
查找資料發(fā)現(xiàn)swiper有一個(gè)click-slide的點(diǎn)擊事件,該事件可接收（index, realIndex）參數(shù)。
<swiper ref="mySwiper" class="my-swipe" :options="swiperOptions" @click-slide="goToPage"></swiper>`
goToPage(index, realIndex) {
// index 當(dāng)前slide下標(biāo)包含復(fù)制的slide
// realIndex 真實(shí)的下表 根據(jù)這個(gè)下標(biāo)執(zhí)行對(duì)應(yīng)方法即可。
}到此這篇關(guān)于關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法的文章就介紹到這了,更多相關(guān)使用swiper和echarts遇到問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js模仿php中strtotime()與date()函數(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了js模仿php中strtotime()與date()函數(shù)實(shí)現(xiàn)方法,涉及javascript時(shí)間操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
基于rem的移動(dòng)端響應(yīng)式適配方案(詳解)
下面小編就為大家?guī)?lái)一篇基于rem的移動(dòng)端響應(yīng)式適配方案(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
css實(shí)現(xiàn)窗戶上水珠效果，效果特別逼真，窗外的雨淅淅瀝瀝飄打在玻璃上，看起來(lái)很像模糊的窗外，斜滴的雨露，接下來(lái)給大家一起來(lái)用CSS技術(shù)實(shí)現(xiàn)這樣一幅畫面，下面給大家分享使用純css實(shí)現(xiàn)窗戶玻璃雨滴逼真效果，感興趣的朋友快樂圍觀吧2015-08-08
下面小編就為大家?guī)?lái)一篇JS中位置與大小的獲取方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript 開發(fā)中規(guī)范性的一點(diǎn)感想
在開發(fā)中通用的幾個(gè)方法，我們把它們放到utility目錄下或者utility.js中；所有的提示信息和報(bào)錯(cuò)信息統(tǒng)一放置在一起?？雌饋?lái)都是小小的幾步，卻能讓咱們開發(fā)的代碼同事讀起來(lái)更順暢，下個(gè)項(xiàng)目中也能用上。2009-06-06
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁(yè)布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下2016-05-05
JS代碼格式化和語(yǔ)法著色V2...2006-10-10
JS數(shù)組排序技巧匯總(冒泡、sort、快速、希爾等排序)
這篇文章主要介紹了JS數(shù)組排序技巧,實(shí)例匯總了JavaScript冒泡排序、sort排序、快速排序、希爾排序等,并附帶分析了sort排序的相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-11-11
JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
JavaScript用JSONP跨域請(qǐng)求數(shù)據(jù)實(shí)例詳解
Javascript跨域訪問(wèn)是web開發(fā)者經(jīng)常遇到的問(wèn)題，什么是跨域，就是一個(gè)域上加載的腳本獲取或操作另一個(gè)域上的文檔屬性。下面這篇文章主要介紹了JavaScript用JSONP跨域請(qǐng)求數(shù)據(jù)的方法,需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01