モバイル端子が画面サイズによって制限され、多くのコンテンツを表示する場合、一部の領域をスワイプする必要があります。この記事は、プロジェクトのすべての方法を示しています。ニーズに応じて適切なスライド方式を選択できます。スライディングの基本原理は、2つの容器AとBがあることです。Aが外層に、Bが内層にある場合です。 Aが外側の層Aの幅または高さに固定されている場合、内層コンテナBの幅または高さを巻くことができます。
実装方法
1）。イオンスクロール
Ionicに付属のスライディングコマンドを使用します
<Ion-View View-Title = "Dashboard"> <Ion-Content Has-Bouncing = "false"> <ion-scroll has-bourncing = "false" direction = "x"> <div> ion-scrollはスライドを実現し、イオンによって提供されるスライディングコンポーネントを使用してスライドを達成します。他のイオンスロールプロパティについては、公式Webサイトのドキュメントを参照してください</div> </ion-scroll> </ion-content> </ion-view>
2）。 CSSのオーバーフロー
<ion-view view-title = "dashboard"> <ion-content has-buncing = "false" overflow-scroll = "true"> <div> <div> cssのオーバーフロー属性を使用するか、スクロールを実装して、cssのオーバーフロー属性を使用するか、cssの属性属性を使用してcssのcss属性を使用しますまたは、スクロールしてスクロールを実装し、CSSまたはスクロールのオーバーフロー属性を使用してスクロールを実装し、CSSまたはスクロールのオーバーフロー属性を使用してスクロールを実装するか、CSSのオーバーフロー属性を使用するか、スクロールを使用してスクロールを実装します</div> </div> </</ion-content> </ion-view> </ion-view>
•オーバーフロー：自動コンテンツがトリミングされている場合、ブラウザはスクロールバーを表示して残りを表示します。
•オーバーフロー：スクロールコンテンツはトリミングされますが、ブラウザはスクロールバーを表示して残りを表示します。
注：このように、イオンコンテンツはオーバーフローscroll = "true"指令を追加する必要があります。イオンは、独自のスクロール方法のセットを実装します。
タッチイベントを聞いてください
<div id = "dash_scroll_container"> <div ng-repeat = "d in datas" style = "margin-right：20px; border：solid 1px＃ffc900; height：100％; width：100px;ディスプレイ：インラインブロック;
対応するJS
Angular.module（ 'starter.controllers'、[]）。コントローラー（ 'dashctrl'、function（$ scope）{$ scope.datas = [1,2,3,4,5,6,7,8,9,10]; var startx = 0、starty = 0; var $ domscroll = $（ " $ domscroll.on（ "touchstart"、function（e）{startx = e.originalevent.changedtouches [0] .pagex; starty = e.originalevent.changedtouches [0] .pagey; console.log（ "start :("+startx+"、"+"） $ domscroll.on（ "touchmove"、function（e）{var x = e.originalevent.changedtouches [0] .pagex-startx; var y = e.originalevent.changedtouches [0] .Pagey-Starty; （y）> math.abs（x））{// scrolltop（$（this）、y）; E.PreventDefault（）; e.StopPropagation（）;}）;}指のTouchStartとTouchMoveイベントを聴くことにより、スライド距離が取得され、外部コンテナDIVのスクロールバーが呼び出され、対応する距離にスクロールします。
•$（selector）.scrollleft（位置）：要素の水平スクロール位置を設定します
•$（selector）.scrolltop（位置）：要素の垂直スクロール位置を設定します
最後に、AngularJSコマンドを使用して、スクロールリスニングを1つの命令にカプセル化します。これは、将来のスライド中に使用するのに便利です。
directive.jsを追加：
Angular.Module（ 'Starter.Directives'、[]）。ディレクティブ（ 'myscroll'、function（）{function link（$ scope、element、attrs）{var $ domscroll = $（element [0]）; var startx = 0、starty = 0; $ domscroll.on（ "touchstart"、functions（e）{e）、 startx = e.originalevent.pagex; = e.originalevent.ChangedTouches [0] .OriginalEvent.ChangedTouches [0] .Pagey-Starty; //上下にスライドするScrolltop（$（this）、y）; e.Stoppagation（）} var currentsoltop（）; return {制限： 'a'、link：link};}）;このようにして、カプセル化後に使用すると便利です。また、スライドする必要がある要素にmy-scrollの命令を追加します。
<div my-scroll style = "border：slateblue solid 1px; width：100％; height：height：300px; hidden：hidden; marge：0; padding：0;"> <div> <div> <div> <div> <div d div div> <div> <div d div div div ng-repeat = "d in datas" style = "margin-bottom：20px; border：border：solid 1px＃007aff; height; height;領域{{d}} </div> </div> <div> div> <div> <div ng-repeat = "d in datas" style = "margin-bottom：" margin-bottom; border：solid 1px＃ffc900; height：80PX;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。