84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
swiper tab切換 點選每個按鈕,怎麼可以讓swiper容器,移動
例如網易的 頂部tab切換 點擊每一按鈕 ,tab切換的容器都會滾動(1:可以向左 ,向右滾動,而且內容是佔滿整個容器的,)
http://3g.163.com/touch/auto?...
业精于勤,荒于嬉;行成于思,毁于随。
橫向 scroll 滾動 .topnav_list
.topnav_list
我做了一個 DEMO:https://codepen.io/anon/pen/d...
只是實現了基本功能,移動位置不是很精確,實際使用的話需要自己調校移動量。
原理就是給每個 .topnav_item 綁定一個 onClick 的 listener。當點擊元素時,取得該元素在 topnav_list 中的 index,然後把 .topnav_list 相應地向左位移 width * index 距離(不是精確值,需要調校)。
.topnav_item
onClick
topnav_list
DEMO 中用了 ES2015 的一些語法,實際使用時需要注意瀏覽器相容性。圖省事用了 jQuery 的.scrollLeft() 方法,實際使用時可以自行實作一個。
.scrollLeft()
橫向 scroll 滾動
.topnav_list
我做了一個 DEMO:https://codepen.io/anon/pen/d...
只是實現了基本功能,移動位置不是很精確,實際使用的話需要自己調校移動量。
原理就是給每個
.topnav_item
綁定一個onClick
的 listener。當點擊元素時,取得該元素在topnav_list
中的 index,然後把.topnav_list
相應地向左位移 width * index 距離(不是精確值,需要調校)。DEMO 中用了 ES2015 的一些語法,實際使用時需要注意瀏覽器相容性。圖省事用了 jQuery 的
.scrollLeft()
方法,實際使用時可以自行實作一個。