大家看如上圖片是設(shè)計(jì)稿的需求,乍一看是沒(méi)毛病的,但是,你仔細(xì)看
是的,切換按鈕是游離在整體寬度之外的,由于我懶,所以這里使用了一個(gè)layBody來(lái)框柱內(nèi)容的寬度,然后大家看一下swiper的切換。
是的,swiper的切換按鈕是在swiper內(nèi)部的,這里swiper使用了絕對(duì)定位來(lái)使切換按鈕位于兩側(cè),于是我們可以修改一下left和right。
結(jié)果發(fā)生了這樣的事,因?yàn)閮蓚?cè)的切換是與整個(gè)swiper定位的,swiper設(shè)置了超出隱藏,所以超出的部分是看不見的,那么就不能用定位了嗎。其實(shí)不然,我陷入了一個(gè)誤區(qū),導(dǎo)致我認(rèn)為只有js綁定的class類內(nèi)部才能正常執(zhí)行切換。我們完全可以把切換按鈕放在所綁定的區(qū)域外,然后與綁定的class類同級(jí),再在外邊加一個(gè)相對(duì)定位就可以了。
在body中我們使用定位就不會(huì)被隱藏了,這樣我們就實(shí)現(xiàn)了在限制寬度的條件下使用定位來(lái)設(shè)置swiper切換按鈕。