毎度お世話になっております
monaca+angularjsにてTwitterクライアントを開発中ですがonsenuiのパターンからTimelineのソースを利用してUIを作成しましたが、表題の通りons-tabbar
でエラーが発生しているようでIDEのプレビュー画面ではTLがスライドで表示されるものの実機(android)ではTweetが1枚しか表示されない状況です。
app.jsをロードしてはいるもののまだUIと紐付けてないのでUI側に原因があると思うのですが解決する方法は無いでしょうか?
サンプルページがonsen-ui 2.0からということでしたのでversion2.2.2を利用しております
html
1<!DOCTYPE HTML> 2<html ng-app="myApp" lang = "ja"> 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:; 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 <script src="js/jsoauth.js"></script> 13 <script src="js/underscore.js"></script> 14 15 <link rel="stylesheet" href="components/loader.css"> 16 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 17 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 18 <link rel="stylesheet" href="css/style.css"> 19 20 <script src="js/app.js"></script> 21 22</head> 23<body> 24 <ons-tabbar> 25 <ons-tab page="timeline.html" active="true"> 26 <ons-icon icon="ion-home" class="tab-icon"></ons-icon> 27 </ons-tab> 28 <ons-tab page="timeline.html"> 29 <div class="notification reply-notification" ons-tab-inactive>4</div> 30 <ons-icon icon="ion-at" class="tab-icon"></ons-icon> 31 </ons-tab> 32 <ons-tab page="timeline.html"> 33 <ons-icon icon="ion-heart" class="tab-icon"></ons-icon> 34 </ons-tab> 35 <ons-tab page="timeline.html"> 36 <ons-icon icon="ion-person" class="tab-icon"></ons-icon> 37 </ons-tab> 38 </ons-tabbar> 39 40 <ons-template id="timeline.html"> 41 <ons-page> 42 <ons-toolbar> 43 <div class="left"> 44 <ons-toolbar-button> 45 <ons-icon icon="ion-compose" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon> 46 </ons-toolbar-button> 47 </div> 48 <div class="center"> 49 Timeline 50 </div> 51 <div class="right"> 52 <ons-toolbar-button> 53 <ons-icon icon="ion-ios-search-strong" fixed-width="false" style="font-size: 26px; vertical-align: -4px;"></ons-icon> 54 </ons-toolbar-button> 55 </div> 56 </ons-toolbar> 57 58 <ons-list class="timeline" modifier="inset"> 59 <ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3,4,5,6,7,8,9]"> 60 <ons-row> 61 <ons-col width="50px"> 62 <img ng-src="images/profile-image-0{{i}}.png" class="timeline-image"> 63 </ons-col> 64 65 <ons-col> 66 <div class="timeline-date">3m</div> 67 <div class="timeline-from"> 68 <span class="timeline-name">Dave Graham</span> 69 <span class="timeline-id">@daveg</span> 70 </div> 71 72 <div class="timeline-message"> 73 Lorem ipsum dolor sit amet, consectetur adipisicing elit. 74 </div> 75 </ons-col> 76 </ons-row> 77 </ons-list-item> 78 </ons-list> 79 80 81 </ons-page> 82 </ons-template> 83</body> 84</html> 85
css
1.reply-notification { 2 position: absolute; 3 top: 28px; 4 font-size: 10px; 5 font-weight: 600; 6 height: 13px; 7 line-height: 13px; 8 padding: 0 4px; 9 min-width: 13px; 10 margin-left: 18px; 11} 12 13.tab-icon { 14 font-size: 28px; 15 vertical-align: -4px; 16} 17 18.timeline { 19 margin-top: 10px; 20 margin-bottom: 10px; 21} 22 23.timeline-li { 24 line-height: 1; 25 padding: 10px; 26} 27 28.timeline-image { 29 width: 40px; 30 height: 40px; 31 border-radius: 4px; 32} 33 34.timeline-date { 35 float: right; 36 font-size: 12px; 37 opacity: 0.35; 38 margin-top: 3px; 39} 40 41.timeline-from { 42 margin: 0px 0 6px 0; 43} 44 45.timeline-name { 46 font-size: 15px; 47 font-weight: 500; 48} 49 50.timeline-id { 51 font-size: 14px; 52 opacity: 0.4; 53} 54 55.timeline-message { 56 margin-top: 4px; 57 font-size: 14px; 58 opacity: 0.8; 59 line-height: 1.15; 60} 61
よろしくお願いします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/23 08:48