如何在 spotify 应用程序 API 中创建类似“轮播”的小部件？
Posted
技术标签:
【中文标题】如何在 spotify 应用程序 API 中创建类似“轮播”的小部件？【英文标题】：How to create a "carousel"-like widget in spotify apps API? 【发布时间】：2012-02-09 15:40:29 【问题描述】：是否可以使用 spotify 应用程序 API 来创建其中一个填充我选择的数据的小部件？
【问题讨论】：
【参考方案1】：是的，通过使用 import/scripts/pager。这是一个从“新增功能”应用程序中提取和简化的示例。你的 pager.js：
"use strict";
sp = getSpotifyApi(1);
var p = sp.require('sp://import/scripts/pager');
var dom = sp.require('sp://import/scripts/dom');
exports.init = init;
function init()
var pagerSection = dom.queryOne('#pager');
var datasource = new DataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
var options =
perPage: 5,
hidePartials: true,
orientation: 'vertical', // 'vertical', 'horizontal'
pagingLocation: 'top', // 'top', 'bottom'
bullets: false,
listType: 'list', // 'table', 'list'
context: 'aToplist' // some string unique for each pager
;
var pager = new p.Pager(datasource, options);
pager.h2.innerhtml = "Example Pager";
dom.adopt(pagerSection, pager.node);
function DataSource(data)
var data = data;
this.count = function()
return data.length;
;
this.makeNode = function(index)
var dataItem = data[index];
var li = new dom.Element('li');
var nameColumn = new dom.Element('div',
className: 'nameColumn',
html: '<div class="nameColumn">'+
'<a href="#" class="name">Name' + dataItem + '</a>'+
'<a href="#" class="creator">Creator' + dataItem +'</a>'+
'</div>'
);
dom.adopt(li, nameColumn);
return li;
;
你的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="pager.css">
</head>
<body onload="sp = getSpotifyApi(1); sp.require('pager').init();">
<div id="wrapper">
<section class="toplists" id="bottomToplists">
<section id="pager" class="playlists playlistsTable toplist"></section>
</section>
</div>
</body>
</html>
最后，将 whatsnew.css 复制到您的项目中并将其重命名为 pager.css。您当然需要清理 CSS 并修改 index.html 中的元素以适合您的应用，但这是一个很好的起点。
“最新消息”应用还提供了一个带有专辑插图的水平寻呼机示例。看看this question and answer，了解如何提取应用的源代码。
另外请注意，我不确定 pager.js 是否会成为公共 API 的一部分。如果没有，那么您当然可以将其提取到您自己的寻呼机小部件中并使用它。
【讨论】：
以上是关于如何在 spotify 应用程序 API 中创建类似“轮播”的小部件？的主要内容，如果未能解决你的问题，请参考以下文章