使用swiper3實現旋轉木馬的遇到的連線點選錯誤問題
問題描述:
公司在活動日推出首頁輪播圖公告,想要通過swiper來實現旋轉木馬,但是實現旋轉木馬後,點選圖片時,發現個別圖片跳轉有問題。(公司的連線都是通過特殊的函式處理,因為是在小程式的環境下,連線跳轉的方式不一樣)
問題分析:
通過監聽連線的@click.prevent事件(就是在連線轉換函式新增console.log程式碼),並且直接新增onclick事件(排除vue的問題),進過多次測試,發現有些圖片經過了連線轉換函式和onclick事件,但是個別並沒有,彷彿沒有事件,直接使用超連結的預設跳轉,通過查閱官方文件,發現當你定義loop時,swiper會clone第一張圖片,想起以前也碰到過此類問題,問題的原因是沒有沒有clone事件,只是cloneDOM節點
解決問題:
拋棄直接使用a標籤,直接使用swiper的onClick事件,當然,連線通過data-屬性進行獲取
問題解決。
相關推薦
使用swiper3實現旋轉木馬的遇到的連線點選錯誤問題
問題描述: 公司在活動日推出首頁輪播圖公告,想要通過swiper來實現旋轉木馬,但是實現旋轉木馬後,點選圖片時,發現個別圖片跳轉有問題。(公司的連線都是通過特殊的函式處理,因為是在小程式的環境
【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider
pad 語句 borde nbsp strong 調用 define ide right 實現效果: 實現原理: 技術棧: javascript+jQuery+html+css 實現步驟: // 0. 獲取元素 // 1. 鼠標放置到輪播圖上,顯示兩側的
純CSS3實現旋轉木馬
utf ans blue 純css3 旋轉 ota let 分享圖片 orange test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
Js實現抽獎轉盤,和點選返回某個模組頂部的功能
最近寫了幾個轉盤抽獎的活動頁面: 1.設定旋轉的角度: HTML部分:轉盤程式碼: <div class="lottery"> <div class="lottery_box"> <di
ViewPager+RadioGroup+RadioButton實現滑動切換頁面與點選按鈕切換頁面
一:效果圖: 二:程式碼: 首先 根據我們有幾個頁面就設定幾個Fragment, 主函式: public class MainActivity extends AppCompatActivity { private ViewPager viewpager;
Android 養成記-1 --1.4 動畫系列 (選單側滑+圖示旋轉+dialog彈出+點選效果)
選單側滑動畫 思想是佈局檔案裡,將選單欄跟內容欄放在同一個layout中,但是選單欄初始是隱藏狀態. 總佈局是線性水平佈局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
實現element-ui中table點選一行展開
轉:https://www.jianshu.com/p/e51ba4cb11d6 先上效果 效果圖 三要素 1、row-click 點選行 2、ref 自行了解vue 3
unity3d實現3D物體上的點選事件
首先要在攝像機中新增元件Physics Raycaster void Update () { if(Input.GetMouseButtonUp(0)){ Ray ray = Camera.main.ScreenPointToRay(Input.mousePosi
Android 輪播圖的實現 自動+手動滑動+指示+點選事件
1.圖片載入框架compile 'com.github.bumptech.glide:glide:3.5.2' 2.一個先寫一個佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns
實現Material Design風格的點選水波盪漾效果
自Material Design的設計理念推出以來,整個安卓的UI跟UE界幾乎發生了翻天覆地的變化,由此推出的設計理念也在一步一步的被引入到開發者的具體專案中,良心來說Google提出的這個設計理念跟相關的支援包確實也給開發者帶來極大的便利,但是不足的是,向下相容做的不是太
解決RecyclerView實現聊天介面,但點選下面的EditText後彈出的輸入法會遮蓋RecyclerView內容的方法
學習Android也將近4個年頭了,一直想寫點自己所學的內容來幫助後來人,為網際網路奉獻自己的一份力量,也算自己的積累。但是之前由於自己的惰性一直沒有下筆,那就從今天這一篇開始吧! 我們做Android開發經常會有做即時聊天的需求,產品經理不管做啥APP,都要塞個IM,那
Android實現ListView顯示資訊,點選每個item,跳轉到相應介面
介面如下:(做這個目的僅僅是為了學習一點小知識,因為自己才剛開始) 實現的方法比較簡單,就是定義一個ListView,然後設定監聽,ListView對每個條目的監聽是setOnItemClickListener。 onItemClick(AdapterView&
recycleview實現title橫向滑動,點選條目居中顯示
首先這種需求常規有兩種做法, 第一種:動態建立TextView 然後放入到LinearLayout,Linearlayout在HorizontalScrollView中; 第二種:就是HorizontalScrollView + GridView; 這裡
一個音樂播放器Vue實現(音樂唱片,點選下面播放,中間的圖片可以轉起來。)
https://www.jb51.net/article/134491.htm 需求:做一個類似於下圖所示的音樂唱片,中間暫時用本地圖片,點選下面播放,中間的圖片可以轉起來。 效果: html <div id="musicImage"> <div class="
JS實現按下按鍵觸發點選事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS實現按下按鍵觸發點選事件</title> </head> &
Android富文字實現不同的文字新增點選事件
如果可以點選的文字位置是固定不變的,可以在String.xml中配置(如:“可以點選的”給“點選”設定點選事件)。 @Override protected void onCreate(Bundle s
css實現的輪播和點選切換(無js版)
https://github.com/lingxuanHuang/carousel-noJS .slide{ position: relative; margin:auto; width: 600px; height: 200px;
答題微信小程式實現(2):點選計數
不太習慣用新版寫東西,還是markdown寫著習慣。 我也是一個初學者,所以把目的拆分成一個個小模組,分別實現吧。 答題和隨機的原始框架在(1)中已經實現了。 那麼這篇就寫積分。也就是答對一題,加1分。這裡簡化成點選一次加1分。 好開森,點選計數的功能終
react native中使用react-native-viewpager實現的商品展示新增點選事件
對於android,react-native-viewpager這個第三方實現商品展示很好用 <ViewPager dataSource={this.state.adDataSource}
點選頁面上方tab實現變換左邊選單,點選選單實現右邊內容變化思路!
1、點選tab選項的時候,根據tab資訊生成左邊的選單。 2、點選左邊的選單,將選單超連結到右邊<iframe>標籤的內容中 <a href="../XX.action?codeInfo=Demo123" target="myFrameName"