【OnsenUI・Angular】単一ページで横スクロールを実現する方法【Monaca・ハイブリッドアプリ開発】

【OnsenUI・Angular】単一ページで横スクロールを実現する方法【Monaca・ハイブリッドアプリ開発】

タイトルの内容。
スクロールのようにページ遷移するのではなく、一つのページ内で横スクロールを実現したかった。
やりたいことだけやって、optionなどは試してはいないが、とりあえず実現できたので。

【環境】
開発環境はMonaca
OnsenUIとAngularを使用

今回使ったのは、

ons-carousel

ja.onsen.io

実際の実装は以下のようにした。

                <ons-carousel swipeable overscrollable auto-scroll fullscreen ons-postchange="sctrl.carouselChange()" var="sim_carousel">
                    <ons-carousel-item class="carousel-items">
                        <p>1つ目</p>
                    </ons-carousel-item>
                    <ons-carousel-item class="carousel-items">
                        <p>2つ目</p>
                    </ons-carousel-item>
                    <ons-carousel-item class="carousel-items">
                        <p>3つ目</p>
                    </ons-carousel-item>
                    <ons-carousel-cover>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 0">
                            <ons-icon icon="circle" ></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                        </div>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 1">
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle" ></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                        </div>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 2">
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle" ></ons-icon>
                        </div>
                    </ons-carousel-cover>
                </ons-carousel>

動きを見てみると、横スクロールというかスワイプによるページ遷移みたいになっている。
これはoptionのanimationとかanimation-optionsを変更すれば思い通りの動きになると思ってる。

重要なこと

◆縦方向のスクロールができなくなる

この実装があるページでは縦方向のスクロールができなくなる。
縦方向のスクロールをできるようにするには、

   direction="vertical" 

でできるが、今度は横スクロールができない。
両方できるようにっていうのは難しそう。
横スクロールを実現するには、縦方向のスクロールが必要のないコンテンツを用意する必要がありそう。
両方を実現できるなら教えて欲しいです。

◆スクロールのイベントはons-postchangeで拾う

  <ons-carousel ons-postchange="sctrl.carouselChange()" var="sim_carousel">

このように、Angularを使っている場合は,ons-postchangeを使ってスクロールのイベントを拾う。
記載しているcarouselChange()の中では、現在のcarouselのindexを取得して、その値を使って、表示されるiconを変更するというもの。

  this.carouselChange = function(){
      // indexを取得してcarouselNumに設定
      this.carouselNum = sim_carousel.getActiveIndex();
  }

getActiveIndex()はindexを取得するメソッド。
ons-carouselタグに

  var="sim_carousel"

の記載があるが、この値に対して使用する。
htmlについては以下を参照

◆固定部分はons-carousel-coverタグで記載する

ons-carousel-coverタグを使えば、一部スクロールしない部分を使うことができる。
例えば、横スクロールした場合に、今何個目のcarouselにいるのかを示すアイコンとかを表示するとか。

                    <ons-carousel-cover>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 0">
                            <ons-icon icon="circle" ></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                        </div>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 1">
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle" ></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                        </div>
                        <div class="cover-label" ng-show="sctrl.carouselNum == 2">
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle-thin"></ons-icon>
                            <ons-icon icon="circle" ></ons-icon>
                        </div>
                    </ons-carousel-cover>

こんな感じで。
もうちょっと踏み込みたいけど、今回はここまで。