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

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

ただいまの
回答率

90.50%

  • AngularJS

    567questions

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

  • Onsen UI

    320questions

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

ons-lazy-repeatのセルの高さについて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 861

yoppy0066

score 248

ドキュメントより、calculateItemHeightメソッドでセルごとに高さを指定できるかと存じます。

その際に高さをピクセル(数字)で返すかと思いますが、セルにセットするデータによって高さがかわる場合にどのような実装とするのが良いでしょうか?

例えばiOSではセルの高さを行ごとに計算して返すような実装になるかと思いますが、Onsen Uiでも同様の形で実装することが可能になりますでしょうか?

画面サイズによって、セルの高さも異なるため数値固定で返すのが難しいと考えて今回の質問をさせて頂きました。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

Onsen UI 開発メンバの @n_matagawa です。

 現状と対処法

「セルの内容に応じてセルの高さを変える」という実装は現在のバージョン(Onsen UI 2.1.0)では行えません。

しかし現在のバージョンでも、「セル内のテキストの長さからセルの高さを推定する」等といった対処は可能です。
こちらの方のツイートが参考になると思います:
https://twitter.com/WabisabiApp/status/813374623052009472

 修正版 ons-lazy-repeat について

上記の問題は以前よりチームとしても把握しており、手元では既に修正版の ons-lazy-repeat を用意しています:
https://github.com/OnsenUI/OnsenUI/pull/1759

修正版の ons-lazy-repeat は近日リリース予定の Onsen UI 2.2.0 に搭載されます。

お急ぎの場合は、GitHub の OnsenUI/OnsenUI リポジトリを clone し、適切なリビジョンをチェックアウトして yarn install && gulp dist を実行することで修正版の ons-lazy-repeat を含む onsenui.jsonsenui.cssonsen-css-components.css を生成してご利用いただけます。よろしくお願いいたします。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/12 20:37

    ありがとうございます!

    キャンセル

  • 2017/02/13 14:12 編集

    度々申し訳ありません。試して見ようと思い以下の手順でビルドしてみたところ、
    {build,OnsenUI-dist}/js/onsenui.jsの先頭に「/*! onsenui v2.0.5 - 2017-02-13 */」とversionが2.2出ないものが生成されるようなのですが、こちらは手順として正しくなかったでしょうか?

    $ git clone -b dev-2.2.0 https://github.com/OnsenUI/OnsenUI.git
    $ yarn install && gulp dist

    ご確認頂けますと幸いです。

    キャンセル

0

dev-2.2.0 ブランチは先日まで使用されていましたが現在は使用されていません(混乱を防ぐため今削除しました)。ons-lazy-repeat の修正版は現在 master ブランチが指しているリビジョン(3c45fc85)にあります。(非常にややこしいのですが、現在 master ブランチと vue2 ブランチがコンフリクトを起こしており、master ブランチは 2.0.x 系の開発に、vue2 ブランチは 2.1.x 系の開発に使用されています。そのため master ブランチをチェックアウトすると現在の 2.0.x 系の最新版である 2.0.5 に変更が加わったものがチェックアウトされます)

>versionが2.2出ないものが生成される

現在の master ブランチにあるものは Onsen UI 2.0.5 と Onsen UI 2.2.0 の間にある中途半端な状態の Onsen UI であるため、「2.2.0」とは出力されず、「2.0.5」と出力されます。気になる場合は package.json の中の 2.0.5 を 2.2.0-dev などと書き換えてからビルドを行ってください。

なお、今回の手順は正式なものではないため、動作は保証いたしかねます。安定板をお求めの場合はお手数ですが 2.2.0 のリリースまでお待ちください。よろしくお願いいたします。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/14 00:14

    度々ありがとうございました。おかげさまで実際に試すことができました。

    キャンセル

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

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

同じタグがついた質問を見る

  • AngularJS

    567questions

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

  • Onsen UI

    320questions

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

閲覧数の多いAngularJSの質問