elm:elm-chat
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
elm:elm-chat [2019/05/24] – [参考サイト] adash333 | elm:elm-chat [2019/06/16] – [linuss/smooth-scrollパッケージ] adash333 | ||
---|---|---|---|
行 11: | 行 11: | ||
+ | ===== ElmとFirebaseでチャットアプリ作成のためのメモ ===== | ||
+ | ===== 一番下まで自動スクロール ===== | ||
+ | Browser.Domの、 | ||
+ | getViewportOf関数と、 | ||
+ | setViewportOf関数 | ||
+ | について調べる必要あり。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | jumpToBottom " | ||
+ | |||
+ | |||
+ | jumpToBottom : String -> Cmd Msg | ||
+ | jumpToBottom id = | ||
+ | Dom.getViewportOf id | ||
+ | |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height) | ||
+ | |> Task.attempt (\_ -> NoOp) | ||
+ | </ | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @uzimaru0000 | ||
+ | 2018年12月19日に更新 | ||
+ | 任意のイベントデータを含んだメッセージを作る方法とBrowser.Domについて | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | requestScrollCmd : Cmd Msg | ||
+ | requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf " | ||
+ | |||
+ | </ | ||
+ | |||
+ | どうしても、getViewportOf でやろうとしてもうまくいかない。 | ||
+ | 201906時点 | ||
+ | |||
+ | ===== linuss/ | ||
+ | https:// | ||
+ | |||
+ | 使用例 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | *パッケージのインストール | ||
+ | |||
+ | < | ||
+ | elm install linuss/ | ||
+ | </ | ||
+ | |||
+ | *以下の2つをimport | ||
+ | |||
+ | < | ||
+ | import SmoothScroll exposing (scrollTo) | ||
+ | import Task exposing (Task) | ||
+ | </ | ||
+ | |||
+ | *msgに以下の2つを追加 | ||
+ | |||
+ | < | ||
+ | type Msg | ||
+ | = NoOp | ||
+ | | SmoothScroll String | ||
+ | </ | ||
+ | |||
+ | *update msg modelに以下を追加 | ||
+ | |||
+ | < | ||
+ | update msg model = | ||
+ | case msg of | ||
+ | NoOp -> | ||
+ | ( model, Cmd.none ) | ||
+ | |||
+ | SmoothScroll id -> | ||
+ | ( model, Task.attempt (always NoOp) (scrollTo id) ) | ||
+ | </ | ||
+ | |||
+ | *VIEWに以下を追加 | ||
+ | |||
+ | < | ||
+ | view model = | ||
+ | { title = " | ||
+ | , body = | ||
+ | [ div [] | ||
+ | [ p | ||
+ | [ id " | ||
+ | , onClick (SmoothScroll " | ||
+ | ] | ||
+ | [ text "p one" ] | ||
+ | , div [ style " | ||
+ | , p | ||
+ | [ id " | ||
+ | , style " | ||
+ | , onClick (SmoothScroll " | ||
+ | ] | ||
+ | [ text "p two" ] | ||
+ | ] | ||
+ | ] | ||
+ | } | ||
+ | </ | ||
elm/elm-chat.txt · 最終更新: 2019/06/16 by adash333