Question

Spotify应用程序的Spotify UI指南（https://developer.spotify.com/technologies/apps/guidelines/design/）说＆＃34;在应用程序中列出曲目时，请使用我们的标准化曲目列表＆＃34;。我在文档中找不到有关如何使用这些＆＃34;标准化音轨列表的任何示例＆＃34;。通过使用Inspector，我在list.css中找到了类（例如sp-list和sp-item），看起来我需要使用但是还没有能够解决如何使用这些来重新创建外观Spotify曲目列表。 Billboard Top Charts应用程序似乎使用我需要的曲目列表，但我无法找到他们如何做到这一点的方式，因为Inspector仅适用于您自己的应用程序。

有人有任何建议或例子吗？

Answer 1

一些例子

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);

Answer 2

感谢您的提问，我也有同样的问题！

我也得到了没有添加实际内容的问题 - 只是包装div。不包括api.css使它工作，但列表显然没有样式。包括css / list.css也会直接打破它。创建我自己的副本并有选择地注释掉list.css我发现有问题的规则是：

.sp-list > div {

如果您将其更改为

.sp-list {

然后它渲染得很好。不知道发生了什么。显然这个解决方案不是主意，因为我只是复制了什么是共同的资源......

如何在Spotify应用中使用“标准化曲目列表”

2 个答案: