實現移動端touch事件的橫向滑動列表效果

2022-02-05 07:22:54 字數 1091 閱讀 8869

要實現手機端橫向滑動效果並不難，了解實現的原理及業務邏輯就很容易實現。原理：touchstart(手指按下瞬間獲取相對於頁面的位置)——》touchmove(手指移動多少，元素相應移動多少)。

接下來講講實現邏輯：

其實就是手指拖動列表向哪個方向移動多少畫素，並設定左右拖動的邊界值。

附上**及注釋：

在區域內向左右滑動
設定樣式：

*


html,body


.common-wrap


.common-kit__h4


.common-kit


.common-kit__list


.common-kit__list li


.common-kit__list li a


.common-kit__list li:first-child
js**：

function slidecommonkit()


});/*手指移動觸發touchmove事件*/


mask.addeventlistener('touchmove', function (e) 


deltax = endposition.x - startposition.x;   //移動到最後的座標x - 開始時的座標x


movelength = math.abs(deltax);   //獲得移動的x方向的距離


/*向左移動的函式*/


var swipeleft=function()else}}


swipeleft();   //執行該函式


/*向右移動的函式*/


var swiperight=function()else}}


swiperight();


});};slidecommonkit();
效果圖如下：

這樣就實現橫向滑動列表效果了。

移動端 touch事件

在模擬器下不支援用on的方式來給元素加touch事件，推薦用addeventlistener方式 mouse事件的觸發必須在元素範圍內，且在移動端會有300ms左右的延遲 在移動端，觸碰乙個元素時，會立即執行新增在元素上的touch事件，然後記錄座標，300ms之後在這個座標點查詢元素，如果找到元素...

移動端touch事件

1 touch事件 touch,觸控,是移動端的觸控事件,是一組事件 1.touchstart 當手指觸控到螢幕的時候觸發 只會觸發一次 2.touchmove 當手指在螢幕中滑動時觸發 一直觸發 3.touchend 當手指離開螢幕時觸發 只會觸發一次 4.touchcancel 被迫中止滑動時觸...

移動端touch事件

touch 事件 首先 touch 包含三類事件，它們分別是 touchstart touchmove touchend 望文生義這種本能相信你應該會有，但在這裡我還是有必需對這三個詞進行一翻不必要的解釋。touchstart 手指觸控到乙個 dom 元素時觸發。touchmove 手指在乙個 do...