0

試薬を使用してサイトを開発しています。実際、一般的に、試薬でタッチイベントを操作する方法は私にはわかりません。この投稿 clojurescript: touch events and Dominaを読みましたが、 domina を使用して on-touch-start イベントをagentで処理する必要がありますか? ユーザーが%を左または右にスワイプした場合、dom要素を指定して、検出するコードのスニペットを誰かが持っているでしょうか?

4

1 に答える 1

3

Reagent は、React の仮想 DOM と合成イベントを使用します。タッチ イベントはReact で使用できますが、コンポーネントをレンダリングする前に (つまり、 を呼び出す(.initializeTouchEvents js/React true)前にreagent.core/render-component) 呼び出す必要があります。

編集:タッチ イベントはマウス イベントよりも複雑なため、以下のコードは機能しません。いくつかの (JS) 例については、この MDN ページを参照してください。React は同じ touch API を実装しているようです。

スワイプの割合については、次のようにします (未テスト)。

(defn swipe-element []
  (let [swipe-state (atom {:width 0, :start-x 0, :current-x 0})]
    (fn []
      [:div {:on-touch-start 
             (fn [e]
               (reset! swipe-state {:width (.. e -target -offsetWidth)
                                    :start-x (.. e -target -pageX)
                                    :current-x (.. e -target -pageX)}))
             :on-touch-move
             (fn [e] 
               (swap! swipe-state assoc :current-x (.. e -target -pageX)))}
        (let [{:keys [width start-x current-x]} @swipe-state
              direction (if (> current-x start-x) "right" "left")]
          (str "Swipe " direction ": "
               (* (/ (.abs js/Math (- start-x current-x)) width) 100) "%")))))
于 2015-09-06T10:23:58.063 に答える