フロントエンドエンジニア芸人がyahooUIのようなフリックでタブ切り替えを作った

【JavaScript】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

【JavaScript】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

1年ぐらい前に「yahooUIのようなフリックでタブ切り替え」を作ったのですが、
日の目をみることがなかったのでもう一度作り直した

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

これ
(スマホで見てください。Android2,iOS6まで対応)
いろいろキモいところあるのですが、、

Query以外のライブラリを使っていなくて、
フリック実装にてこずったりした。
レガシーなブラウザにフリックを効かすとことか。

仕様は、
・スマホのデバイスの幅に対応
・Android2、iOS6から対応
・オリエントチェンジに対応
・タブ内の文字は可変(何文字でも可)
・タブの数も可変
・ユーザーがフリックかタップ押下時にタブを真ん中に位置させる
・タブの列はスクロールできる
・アクティブなタブが全体のタブの最後だったら最初に戻る
・画面遷移時に両方の矢印をフェードインフェードアウトする
・フリック/タップ時矢印をフェードインフェードアウトする。

大変だった思い出があります。

今回は当時jQueryで書いていたこれをどうにかReactに置き換えようと思っている。

github

jsのソース

でわまたー


フロント記事

React
【Reactのstateとpropsの違いが知りたい!(変更・更新の仕方等デモあり)】過去のReact初心者の自分にpropsとstateの違いを説明する
【REACT】REACTの動きを理解したい人の為の最小サンプル
【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】
REACT × FLUX × ES6 [WIP]LINE風チャット

その他
フロントエンド記事
フロントエンド記事(タグ)
JavaScript練習問題
recomposeと仲良くなりたい
機動戦士FlowType
styled-componentsの使い方
初めてReactNativeWebを触ってみて
フロントエンドエンジニア豚汁の作り方
SCSS問題集
Ramda.jsシグネチャの読み方
環境変数の話

サイトTOP
私は何者か

SNS
インド旅instagram
適当な日常写真instagram
イラストinstagram
note
Twitter
FaceBook
※業務連絡やお久しぶり連絡はチャットからお願いします

(Visited 8 times, 1 visits today)