More than 3 years have passed since last update.

規約画面に目的の位置へスクロールする方法を取り入れてみた

Last updated at 2021-02-01Posted at 2021-02-01

#目次

はじめに
実装方法
まとめ
参考

#はじめに
画面に表示しきれない部分がある場合、スクロールをしないと確認することができません。
ただその画面が長い場合、その画面内で目的のところを探すのに時間がかかります。
そこで今回はこの記事では目的の位置までスクロールする方法をご紹介します。

#実装方法
####①画面の作成

今回は5つのボタンを配置しました。それぞれのボタンをタップすると以下のような動作になります。

ボタン名	動作
FABの一番上へ戻る	一番上へスクロール
FABの一番下へ戻る	一番下へスクロール
利用規約へ戻る	一番上へスクロール
プライバシポリシーへ戻る	プライバシーポリシーまでスクロール
少し上へ戻る	このウィジェットから任意の位置へスクロール（今回は少し上へいくよう設定）

画面の構成は以下になります。

####②コーディング
frmTermsOfUseControllerのコーディングを行います。

frmTermsOfUse.js

define({
  
  //一番上へスクロール
  scrollToTop : function(){
    var self = this;
    self.view.flxScMain.scrollToWidget(self.view.flxItem1);
  },

  //該当ウィジェットへスクロール
  scrollToPosition : function(){
    var self = this;
    self.view.flxScMain.scrollToWidget(self.view.flxItem2);
  },

  //一番下へスクロール
  scrollToBottom : function(){
    var self = this;
    self.view.flxScMain.scrollToEnd();
  },

  //メソッド：setContentOffsetを使用して少し上の位置にスクロール
  scrollUseSetContentOffset : function(){
    var self = this;
    self.view.flxScMain.setContentOffset({"x":0,"y":"80%"}, true);
  }

});

上を説明します。

scrollToWidget：選択したウィジェットの位置までフォームをスクロールすることができます。
scrollToEnd：フォームの最後までスクロールすることができます。
setContentOffset：コンテンツをある位置から別の位置にオフセットすることができます。（今回は少し上へいくように設定しています）

####③Actionの紐付け
関数の準備ができたらActionと紐づけていきます。

flxScrollTop(FABの一番上へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
flxScrollBottom(FABの一番下へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToBottom)紐づけ
btnScrollToItem1(利用規約へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
btnScrollToItem2(プライバシポリシーへ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ
btnScrollToItem3(少し上へ戻る)を選択 > Actionタブをクリック > onClickのEditをクリック > Action(scrollToTop)紐づけ