官網(wǎng)鏈接直達
首先在項目首頁H5中有使用到banner,自動滾動,如圖所示
默認有4張圖片,從后臺取出數(shù)據(jù)之后,重新給這4張圖片的src賦值.
賦值之后,發(fā)現(xiàn)第一張和最后一張怎么都不出來,開始以為是地址問題
好的,各種調(diào)試log ,發(fā)現(xiàn)地址沒問題
或者獲取的DOM 節(jié)點有問題?各種console ,還是問題
是對象的類型有問題?試著用js 原生對象 juqery 對象 angular js element 對象
試了都無果,實在是心累,不知道哪里的問題,把官網(wǎng)的API 翻了個遍,還是沒找到問題
難道問題是出在布局上面?
來看看布局
swiper-container 下面除了4張圖和頁標之外還有這個,立馬delete
調(diào)試,還是出不來.... 一口老血噴出...(這里確實有問題,但是不是圖片的問題這個問題后面說)
是在不知道怎么辦了.... 看看DOM 節(jié)點吧....在Chrome 中打開網(wǎng)頁....
我去.老子當時是這個表情
居然有6個DIV ,我4張圖居然給我生成了6個div ,恍然大悟,原來是swiper 內(nèi)部為了循環(huán)滾動,多生成了兩個div
仔細查看問題之后,重新賦值,問題解決.
再來看看另外一個問題,banner圖片要點擊,點擊之后要跳轉原生,來看看原來的代碼
??? -0 +1 ...
switch 下面的代碼除了index 一模一樣......
于是把switch里面重復的代碼提取出來,但是這個indexImg 得重新獲取一下,心想這個框架肯定能直接能取到當前的activeIndex ,于是官網(wǎng)走一波
返回了個swiper對象,再去看看這個對象
這不是嗎?馬上使用這個對象,可是經(jīng)過調(diào)試,index 根本不對...
第一張圖的index 是2 ,意思就是從2開始的. 2,3,4,5
.........
開始以為是API使用問題,把官方的使用示例看了一遍沒問題啊
查看DOM節(jié)點之后發(fā)現(xiàn),在swiper-container 下面除了4張圖和頁標之外下面還有2個div,刪除試試?這就是上面說的那個問題
刪除之后索引正常.....
但是頁面布局不敢提出來,要重新寫布局,直接-2吧.修改之后的代碼
總結:在JavaScript 中,問題無法得到解決的時候,需要使用chrome 調(diào)試工具,查看DOM 節(jié)點,從Dom 布局上來尋找一下問題
