Onsen UI ons-carouselで困ったこと(1)

環境はこちら

・画像をカルーセルに表示して次の画像、前の画像にスライドして移動する
という画面を作っていた

当初はテスト的に作っていたこともあって全ての画像をカルーセルに乗せて表示してたので、
まぁ画面遷移の際に準備でかなりの処理が走ってしまい、非常に遅い

という訳で、今表示している画像、次の画像、前の画像
この3つのみ用意することにした
画像サイズが割と大きいので画面上は常に3枚しか表示しない

やるべきことは
1.移動された時に移動された方向の奥に(先頭か最後)に新しく画像を追加する
2.移動された時に移動された方向とは反対の奥(先頭か最後)の画像を削除する

たったこれだけである
だがしかし、かなり手間取ったので要点だけメモする

今回用意するのは3枚だけなので
ons-carousel-item要素のインデックスというのは
0,1,2の3つの数字しか使わない
また、基本的に1が表示されていることになる
0|1|2
|(パイプ)が画面幅だと思っていただいて・・・笑

初期表示
インデックスは
0,1,2
である

右にスライド、1⇒2の方向に移動させたとする
postchange()で変更のイベントが発生する

この中でまず、新しく追加する画像Aを作成し、カルーセルに追加する(appendChild())
インデックスは
0,1,2,3
である

常に3枚なので
1枚消す必要がある
1⇒2の方向に移動したので0を消す(removeChild(hoge.firstChild))

インデックスは
1,2,3
である

カルーセルはここで更新する(refresh())
更新するとインデックスが
0,1,2
に戻る

ここで問題が発生する
中身まで見ていないのでここは予想だが、
カルーセルを移動した際に、
setActiveCarouselItemIndex(2)
のようなことをしているのだろう
今回新しく追加した画像が表示されているではないか!
01|2|
↑こんな状態

さぁどうする!
2に続く

Comments are closed.

Post Navigation