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()
方法,實際使用時可以自行實作一個。