序文
プロジェクトでは、単語のスライドコンポーネントのトグルが必要なため、Ionicはこれを提供します。
実際のプロジェクトで必要なもの:
私はオンラインで他の実装を探しましたが、私は似たようなものは何もないと感じました、そして私は適切なものを見つけられなかったので、私はそれを定義し、できる限りそれを使用しようとしました。まず、レンダリング
レンダリングを見ると、ぼやけたジャグ付きエッジがあります。これは、ピクセルの影響によるものであり、AndroidおよびiOSの携帯電話で非常にスムーズに実行される可能性があります。
コードを実装します
実際、実装するのは非常に簡単です。主にスライダーの位置を計算します。スライディングはCSS変換を使用します。
CSSが使用するクラスは次のとおりです。
.switch_search {position:relative; display:flex; width:120px; height:28px;マージントップ:8px;境界線:ソリッド1px #fff; border-radius:16px;}。switch_search_tab{flex:1; height:28px; width:60px; Line-Height:28px; color:#203c4b; z-index:12;}。white_search_tab {color:#fff;}。switch_bg{background:#fff; border-radius:16px; position:absolute;上:-1px;左:-1px; height:28px; width:60px;}。search_right {transition:-webkit-transform、変換0.6s容易さ。 -webkit-transform:translate3d(60px、0、0); -moz-transform:translate3d(60px、0、0);変換:translate3d(60px、0、0);} -webkit-transform:translate3d(0px、0、0); -moz-transform:translate3d(60px、0、0);}。search_left {transition:-webkit-transform、変換0.6s ease; -webkit-transform:translate3d(0px、0、0); -moz-transform:translate3d(0px、0、0); -moz-transform:translate3d(0px、0、0); translate3d(0px、0、0);変換:translate3d(0px、0、0);}ページ上のHTMLコード:
<div> <div on-swipe-right = "ActiveSlidesearch(1)" ng-click = "activeslidesearch(0)" ng-class = "(slideindexsearch == -1)? ng-click = "ActiveSlidesearch(1)" ng-class = "(slideindexsearch == 1)? '': 'white_search_tab'"> day </div> <div ng-class = "(slideindexsearch == 0 || slideIndexsearch == -1) '' search_left '
対応するコントローラーJSコードは次のとおりです。
$ scope.slideindexsearch = -1; $ scope.activeslidesearch = function(index){$ scope.slideindexsearch = index;};このようにして、単語を含む単純なスライドトグルコンポーネントを実装できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。