Onsen UI(V2.6.1) + AngularJS でMonacaで作成しております。
下記のようにlazy-repeatを使用してリストを作成した際、
実機で素早くスクロールした際に、AngularJSのタグの{{hello.items[index].id}}が表示されてしまうことがあります。
※常にではなく、リフレッシュ(?)がかかると元の値にもどります。
実機は、android端末でしか試していませんが複数端末では発生しております。
こういう状態になるのは仕様なのでしょうか?
回避策はあるのでしょうか?
index.html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16 17 <script> 18 ons.bootstrap() 19 .controller('HelloController', function() { 20 this.world = 'World'; 21 22 this.items = []; 23 self = this; 24 for (var i = 0; i < 300; i++) { 25 var item = { 26 id:i 27 }; 28 this.items.push(item); 29 } 30 31 32 self.inspectionListDelegate = { 33 configureItemScope: function(index, itemScope) { 34 itemScope.index = index; 35 }, 36 countItems: function() { 37 return self.items.length; 38 } 39 }; 40 41 }); 42 ons.ready(function() { 43 44 console.log("Onsen UI is ready!"); 45 46 }); 47 </script> 48</head> 49<body> 50 <ons-page ng-controller="HelloController as hello"> 51 <ons-toolbar> 52 <div class="center">Introduction</div> 53 </ons-toolbar> 54 55 <ons-list> 56 <ons-list-item ons-lazy-repeat="hello.inspectionListDelegate"> 57 <ons-col> 58 <div id="inspection_list">{{hello.items[index].id}}</div> 59 </ons-col> 60 </ons-list-item> 61 </ons-list> 62 </ons-page> 63</body> 64</html> 65
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/26 01:40
2017/10/26 01:46
2017/10/26 01:49
2017/10/26 01:54
2017/10/26 01:56