Monthly Archives: 11月 2015

環境はこちら

前回はこちら

01|2|
となってしまっているのをどうするか

まぁ普通に考えると
setActiveCarouselItemIndex(1)
だったので試してみる

0|1|2
にはなったが、見え方が行って戻ってみたいな感じになっている

さー困った

いい方法ないかとonsenui.jsの中見たら・・・
setActiveCarouselItemIndex(index,options)となっている

options・・・？笑
よく見るとanimationとかも書いてある
えーつまり
http://ja.onsen.io/reference/ons-carousel.html
で紹介されていないパラメータがあるということ！

setActiveCarouselItemIndex(1,{animation:”none”})
とすると上手くいった

がしかし
setActiveCarouselItemIndexでanimationを消しても移動しているとみなされるため、
postchange()イベントが発生してしまっている

なのでsetActiveCarouselItemIndex(1,{animation:”none”})
の前にpostchange()イベントをオフして実行後に再度オンにするといったことをすると
予想通りの動きになった

ちなみに逆方向の場合は
追加はinsertBefore(画像A,hoge.firstChile)
削除はremoveChild(hoge.lastChild)
に変えるだけ

グダグダとメモ書き

環境はこちら

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

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

という訳で、今表示している画像、次の画像、前の画像
この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に続く

環境はこちら

自分のiPhone6 ios9.1で動作確認していると
A,B,Cというページが存在していて
A⇒Bに遷移するとなぜかBに配置してある画像の位置がおかしい
B⇒Cに遷移してpopPageする(Cを消す)とBに配置してある画像が正しい位置に表示されている

なんだこれは！

背景色つけて試してみると、なぜかons-toolbarにdivが重なっている(divが上に上がっている)ため、
画像がずれて表示されていることが判明
divの中身はons-crouselがあってその中にons-crousel-itemがあってpがあってimgがあってという状況

divのtopの値を取得するとA⇒Bの時点では42px、B⇒C⇒Bの時点では62pxと出た
20pxずれとる！

まず、Javascriptで何か変なことしていないか確認してみるということでjavascriptを読み込まないようにしたが、特に変わらず
こうなるとhtmlで悪さをしているに違いないので、ons-toolbarとdiv(背景色とサイズだけ指定)だけ配置して確認してみた
するとなぜかきれいに配置された(重なってない)
ということは消した中に犯人がいる！

1つずつ戻してみた
まぁタイトルにもあるように犯人はons-carouselなんだけど

ripple上では問題なく表示されていた(rippleはios6)ので
予想だけどずれた20pxはステータスバーと関わりがあるのではなかろうか…
詳しい原因はよく分かっていないが、Javascriptで動的にons-carouselを追加するように変更したら正しく配置された！
でも他の画面ではons-carousel使ってないのに同じ現象が・・・

動的に作ればOKなんだろうけど・・・
誰かもっといい解決方法教えてー！