移動端實現橫滑

2022-06-07 14:12:10 字數 548 閱讀 1560

在移動端中我們我們經常會遇見「橫滑」的需求,也就是「橫向滾動」,開使我們可能會想到用各種觸控事件,至少我的第一反應是這樣,但其實有更簡單的辦法!也就是使用overflow屬性

方法一:使用overflow屬性來解決,像下面這樣即可實現橫滑

ul

li

如果說想要顯示「乙個半」li,其實大可不必擔心怎麼處理,因為我們完全可以通過控制每個li的寬度來實現這個,只要寬度合適後面的半個自然後出現!!!

注意:1、如果ul外層還有父元素那麼也要給父元素設定overflow:hidden和寬度

2、li要在一行顯示,但是我們不要用float,因為設定之後li不佔據空間

方法二:使用iscroll

html:

"wrap

"class="

wrap

">

css:

.wrap

.wrap >ul

.wrap li

js:new iscroll('

#wrap

', );

css 實現移動端橫滑

文學li class tab item 歷史 傳記li class tab item 社科 心理li class tab item 經管 科普li class tab item 藝術 文化li ul div div tab part tab item active scroll hidden 1 i...

移動端左滑右滑元件

很久沒發布文章了,一方面工作原因,一方面是惰性開始出來了。希望能繼續堅持菜雞之路。最近有個需求,移動端有導航,需要左滑右滑的時候就能切換導航,跟輪播一樣的效果,但是輪播內容少,而且是一次性載入資料。而需求是很多態別,每個型別有非常多的列表,如果使用輪播,一次性載入資料太多,再加上分頁,那就完全行不通...

移動端滑屏demo

12 34 以上的demo放在具體專案中可能會遇到小問題,例如移動端滑動的還要實現點選到下乙個頁面,就會出現點選先滑動然後才會觸發click。在移動端,手指點選乙個元素,會經過 touchstart touchmove touchend click。手機瀏覽器上,兩次輕觸是放大操作,在第一次被輕觸後...