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

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

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

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

Onsen UI

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

Q&A

解決済

2回答

1788閲覧

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

yoppy0066

総合スコア293

AngularJS

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

Onsen UI

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

0グッド

1クリップ

投稿2017/02/12 00:10

編集2017/02/12 00:48

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

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

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

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

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

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

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

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

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

guest

回答2

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.52.2.0-dev などと書き換えてからビルドを行ってください。

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

投稿2017/02/13 10:02

asial-matagawa

総合スコア164

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

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

yoppy0066

2017/02/13 15:14

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

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.js, onsenui.css, onsen-css-components.css を生成してご利用いただけます。よろしくお願いいたします。

投稿2017/02/12 07:32

asial-matagawa

総合スコア164

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

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

yoppy0066

2017/02/12 11:37

ありがとうございます!
yoppy0066

2017/02/13 05:27 編集

度々申し訳ありません。試して見ようと思い以下の手順でビルドしてみたところ、 {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 ご確認頂けますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問