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

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

ただいまの
回答率

89.53%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,328

huckepain

score 8

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 ソースを追加しました。
ソースは以下の通りです。

<ons-page id="search_list_main" ng-controller="searchListController as listSearch">
    <ons-toolbar fixed-style="true">
        <div class="left">
        </div>
        <div class="center search_list-title-center">リスト</div>
        <div class="right"></div>
    </ons-toolbar>
    <div>
        <div class="search_list-item-div">
            <div class="search_list" id="search_list-item-id" style="">
                <div ons-lazy-repeat="listSearch.delegateSpot">
                    {{item}}
                </div>
            </div>
        </div>
    </div>
</ons-page>
   //razy-repeatの部分のみ抽出
           /* lazy_repeatの制御 */
        this.delegateSpot = {
            createItemContent : function(index, oldContent) {
                var listData = $scope.searchList[index];
                return ons._util.createElement(
                        "<div class='search_list-item' id='"+ listData.dataid + "'"
                        + " ng-click='clickData(" + listData.datano + ")'"
                        + " style='height:" + imageHeight + "px'>"
                        + " <img class='search_list-image' id='img-search-" + listData.datano + "' src='" + listData.image + "'>"
                        + " </div>"
                    );
            },
            countItems: function() {
                return $scope.searchList.length;
            },
            calculateItemHeight: function() {
                var width = Math.round(window.innerWidth * 32 / 100) - 10;

                return width;
            }
        };
.search_list {
    position: absolute;
    z-index: -1;
    overflow-x: none;
    display : -webkit-flex;
    display : flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-items: stretch;
    -webkit-align-items: stretch;
    flex-direction: row;
    -webkit-flex-direction: row;
    width : 100%;
}
.search_list-item {
    display : table-cell;
    width : 32%;
    height: 250px;
    padding-bottom: 5px;
    padding-right: 6px;
}
.search_list-item:nth-child(3n) {
    padding-right: 0px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

self.delegateSpot = {
            configureItemScope: function(index, itemScope) {


                itemScope.index = index;

                itemScope.height = $scope.searchList[index].height;

                itemScope.image1 = $scope.searchList[index].image1;

                itemScope.image2 = $scope.searchList[index].image2;


                itemScope.image3 = $scope.searchList[index].image3;
            },
            countItems: function() {
                return $scope.searchList.length;
            },
            calculateItemHeight: function() {
                var width = imageHeight;

                return width;
            },
            destroyItemScope: function(index, scope) {
            }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

1 2 3
4 5

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/10 14:33

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

    キャンセル

  • 2017/08/10 15:01

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


    A.
    1 2 3
    4 5
    B.
    1
    2
    3
    4
    5

    キャンセル

  • 2017/08/10 15: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>

    キャンセル

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

  • ただいまの回答率 89.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる