序文
プロジェクトでは、単語のスライドコンポーネントのトグルが必要なため、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をもっとサポートすることを願っています。