質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

2390閲覧

ons-lazy-repeatとCSSを使用して、画像を3列均等割り付けを行いたいのですが、できずに困ってます。

huckepain

総合スコア14

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/08/04 01:20

編集2017/08/10 01:10

Onsen UI(2.0.3) + AngularJS1 + Monacaで開発しております。

一覧を3列で均等割り付け、折り返して、次の行へを件数がある分繰り返したいと思っています。
また、件数が多くなるため、ons-lazy-repeatを使用して負荷を減らしたいと思っておりますが、
上手くいきません。
方法がありますでしょうか。
そもそも無理なのでしょうか。

※ng-repeatでは、できていますが、負荷がかかってしまい、
件数が多いとアプリが強制終了してしまうため。

http://rfs.jp/sb/html/html-css-lab/flexbox_propaty.html

2017/08/10 ソースを追加しました。
ソースは以下の通りです。

HTML

1<ons-page id="search_list_main" ng-controller="searchListController as listSearch"> 2 <ons-toolbar fixed-style="true"> 3 <div class="left"> 4 </div> 5 <div class="center search_list-title-center">リスト</div> 6 <div class="right"></div> 7 </ons-toolbar> 8 <div> 9 <div class="search_list-item-div"> 10 <div class="search_list" id="search_list-item-id" style=""> 11 <div ons-lazy-repeat="listSearch.delegateSpot"> 12 {{item}} 13 </div> 14 </div> 15 </div> 16 </div> 17</ons-page>

JavaScript

1 //razy-repeatの部分のみ抽出 2 /* lazy_repeatの制御 */ 3 this.delegateSpot = { 4 createItemContent : function(index, oldContent) { 5 var listData = $scope.searchList[index]; 6 return ons._util.createElement( 7 "<div class='search_list-item' id='"+ listData.dataid + "'" 8 + " ng-click='clickData(" + listData.datano + ")'" 9 + " style='height:" + imageHeight + "px'>" 10 + " <img class='search_list-image' id='img-search-" + listData.datano + "' src='" + listData.image + "'>" 11 + " </div>" 12 ); 13 }, 14 countItems: function() { 15 return $scope.searchList.length; 16 }, 17 calculateItemHeight: function() { 18 var width = Math.round(window.innerWidth * 32 / 100) - 10; 19 20 return width; 21 } 22 };

CSS

1.search_list { 2 position: absolute; 3 z-index: -1; 4 overflow-x: none; 5 display : -webkit-flex; 6 display : flex; 7 justify-content: flex-start; 8 -webkit-justify-content: flex-start; 9 flex-wrap: wrap; 10 -webkit-flex-wrap: wrap; 11 align-items: stretch; 12 -webkit-align-items: stretch; 13 flex-direction: row; 14 -webkit-flex-direction: row; 15 width : 100%; 16} 17.search_list-item { 18 display : table-cell; 19 width : 32%; 20 height: 250px; 21 padding-bottom: 5px; 22 padding-right: 6px; 23} 24.search_list-item:nth-child(3n) { 25 padding-right: 0px; 26}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

A.
1 2 3
4 5
になるようにList・HTMLを作成し、それにconfigureItemScopeで回せるようにしました。

JavaScript

1self.delegateSpot = { 2 configureItemScope: function(index, itemScope) { 3 4 5 itemScope.index = index; 6 7 itemScope.height = $scope.searchList[index].height; 8 9 itemScope.image1 = $scope.searchList[index].image1; 10 11 itemScope.image2 = $scope.searchList[index].image2; 12 13 14 itemScope.image3 = $scope.searchList[index].image3; 15 }, 16 countItems: function() { 17 return $scope.searchList.length; 18 }, 19 calculateItemHeight: function() { 20 var width = imageHeight; 21 22 return width; 23 }, 24 destroyItemScope: function(index, scope) { 25 }

投稿2017/10/25 11:45

huckepain

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ソースがないのでどこでどう間違っているかイメージができないのですが
例えば画像を5枚表示するとして

1 2 3
4 5

と表示したいということでしょうか?
このサンプルレベルであれば普通にできます。

lazyRepeat.delegate = {
createItemContent: function(index, template)
}
でDOM操作ができるのでかなり自由に実装できると思います。

投稿2017/08/09 06:35

lion_

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

huckepain

2017/08/10 01:09

ご回答ありがとうございます。 しっかり記入せず、申し訳ございません。 ソースを追加致しました。 lion_さんの通りのイメージです。 また、DOM操作を行いましたが、 ONSEN UI側でcalculateItemHeightで設定したpxで"top"を割り当てられてしまうため、 上手くいっておりません。 使用方法が間違っているのでしょうか?
lion_

2017/08/10 04:36

追記ありがとうございます。 「calculateItemHeightの影響で」というところがまだ不明ですが、もし仮にcalculateItemHeightを使用しなければ実装可能であればonsenuiのバージョンを2.2に上げることは可能でしょうか? onsenui2.2以降ではcalculateItemHeightを使用せずにlazyrepeatを使用できます。 ヴァージョンアップ方法については以下をご参考ください。 https://teratail.com/questions/70143 もしバージョンアップが採用できない場合は改めて確認します。
huckepain

2017/08/10 05:21

ご回答ありがとうございます。 もともと、Onsen-Uiは、2.3.2で行おうと思っていたのですが、 別画面でcordova-googlemaps-pluginを使用してGooglemapを表示させる必要があり、 2.3.2では表示させることができなかったため、別件で使用していた2.0.3を使用した経緯であります。 ※なぜ、Googlemapの表示ができないのかは不明ですが・・・。 よって、バージョンアップせずに行えることを模索したいです。
lion_

2017/08/10 05:33

では改めて現状の問題点を整理したいのですが、うまくいかないとは画面が崩れるというニュアンスでしょうか? 2.2以前のバージョンのlazyloadではリストのheightは固定になります。ここは認識に相違ないでしょうか? また、cssのsearch_list-itemにheight:250pxの記載があるのでcalculateItemHeightは250固定にしないと意図した動作とならないように思われます。
huckepain

2017/08/10 06:01

うまくいかないというのは、以下のAの通りに表示したいのですが、 Bのように表示されてしまうことです。 リストのheightは、calculateItemHeightで設定するとそのpxに変更されることは確認しています。 よって、固定でなくても問題ないと思います。 A. 1 2 3 4 5 B. 1 2 3 4 5
huckepain

2017/08/10 06:10

実際に実行されたものをインスペクタで確認すると以下のようになり、 高さとTopが指定されているため、onsen ui側で制御されているものなので、 無理なのかなぁと思っていますが…。 <div class="search_list-item ng-scope" id="search_list-item-div0" ng-click="clickData(0)" style="height: 115px; position: absolute; top: 115px; left: 0px; right: 0px;"> <img class="search_list-image" id="img-search-0" src="画像のソース名"> </div>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問