OnsenUI+AngularJS1にてons-lazy-repeatを用いたチャットツールを作成しています。
ons-lazy-repeatを設置した画面上で、テキストボックスも設置しています。
ons-lazy-repeatは動作するのですが、データ件数500件くらいから、
・テキストボックスにフォーカスIN(OS標準の入力パッドが表示される。)
・なにかしら入力してSubmit()
・データが保存され、ons-list-itemが新しく1行書き出される
・テキストボックスからフォーカスOUT(OS標準の入力パッドが非表示される。)
すると、入力パッドが消えた高さ分だけ?不正なons-list-itemが表示されます。
下にスクロールしたり、画面を更新したりすると再描画され、正常に表示されるのですが、おそらく入力パッドが表示される際に、画面全体が上に上がり、入力パッドが非表示されると画面全体が下に下がった際に、delegate内の位置が入力パッドの高さ分だけ狂っているような気がします。
これを回避する手段はありませんでしょうか?
html
1<ons-list> 2 <ons-list-item ons-lazy-repeat="delegate"> 3 {{comment.body}} 4 <ons-list-item> 5</ons-list> 6<ons-bottom-toolbar> 7<form name="form" novalidate ng-submit="submit()"> 8 <input type="text" name="body" id="timeline_body" class="form-control form-block mt-1" required ng-model="body"> 9</form>
javascript
1$scope.delegate = { 2 configureItemScope: function(index, itemScope) { 3 itemScope.comment = $scope.comments[index]; 4 }, 5 countItems: function() { 6 return $scope.comments.length; 7 }, 8 calculateItemHeight: function() { 9 return ons.platform.isAndroid() ? 48 : 44; 10 } 11};
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/21 09:08