4

Spotify アプリの Spotify UI ガイドライン ( https://developer.spotify.com/technologies/apps/guidelines/design/ ) には、「アプリでトラックをリストするときは、標準化されたトラック リストを使用してください」と記載されています。これらの「標準化されたトラック リスト」の使用方法に関するドキュメントの例が見つかりません。Inspector を使用して、list.css でクラス (sp-list や sp-item など) を見つけましたが、これらを使用する必要があるように見えますが、これらを使用して外観を再現する方法を完全に理解することはできませんでした。 Spotify のトラック リスト。Billboard Top Charts アプリは、必要に応じてトラック リストを使用しているようですが、Inspector は自分のアプリでしか機能しないため、これをどのように行っているかを確認する方法が見つかりません。

アドバイスや例はありますか？

4

2 に答える 2

10

いくつかの例

sp = getSpotifyApi(1);

var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");

// Example 1
var tpl = new m.Playlist();
var tempList = new v.List(tpl);
tpl.add(m.Track.fromURI("spotify:track:4z4t4zEn4ElVPGmDWCzRQf"));
tpl.add(m.Track.fromURI("http://open.spotify.com/track/7E8JGVhbwWgAQ1DtfatQEl"));
tpl.add(m.Track.fromURI("spotify:track:40YBc3mR3yyqyYvtesQOMj"));
tpl.add(m.Track.fromURI("spotify:local:Rolling+Stones:A+Bigger+Bang:Rain+Fall+Down:293"));

document.body.appendChild(tempList.node);

// Example 2
var pl = m.Playlist.fromURI("spotify:user:username:playlist:424km2k4m24");
var list = new v.List(pl);

document.body.appendChild(list.node);

// Example 3
var album = m.Album.fromURI("spotify:album:1vWnB0hYmluskQuzxwo25a");
var albumList = new v.List(album);
albumList.node.classList.add("album");

document.body.appendChild(albumList.node);
于 2011-12-22T22:44:24.870 に答える
0

質問してくれてありがとう、私もまったく同じ質問をしました！

私も実際のコンテンツが追加されないという問題が発生します-ラッパーdivだけです。api.css を含めなくても機能しますが、リストには明らかにスタイルが設定されていません。css/list.css を含めると、それも直接壊れます。独自のコピーを作成し、list.css を選択的にコメントアウトすると、問題のあるルールは次のようになることがわかりました。

.sp-list > div {

これを次のように変更すると

.sp-list {

その後、正常にレンダリングされます。何が起こっているのかわかりません。明らかに、この解決策はアイデアではありません。なぜなら、共通のリソースであることを意味するものを複製しただけだからです...

于 2011-12-23T18:49:48.787 に答える