1. 程式人生 > >使用swiper3實現旋轉木馬的遇到的連線點選錯誤問題

使用swiper3實現旋轉木馬的遇到的連線點選錯誤問題

問題描述:
公司在活動日推出首頁輪播圖公告,想要通過swiper來實現旋轉木馬,但是實現旋轉木馬後,點選圖片時,發現個別圖片跳轉有問題。(公司的連線都是通過特殊的函式處理,因為是在小程式的環境下,連線跳轉的方式不一樣)
問題分析:
通過監聽連線的@click.prevent事件(就是在連線轉換函式新增console.log程式碼),並且直接新增onclick事件(排除vue的問題),進過多次測試,發現有些圖片經過了連線轉換函式和onclick事件,但是個別並沒有,彷彿沒有事件,直接使用超連結的預設跳轉,通過查閱官方文件,發現當你定義loop時,swiper會clone第一張圖片,想起以前也碰到過此類問題,問題的原因是沒有沒有clone事件,只是cloneDOM節點
解決問題:
拋棄直接使用a標籤,直接使用swiper的onClick事件,當然,連線通過data-屬性進行獲取
這裡寫圖片描述


問題解決。