如何在Spotify应用程序API中创建类似旋转木马的小部件？ [英] How to create a "carousel"-like widget in spotify apps API?
本文介绍了如何在Spotify应用程序API中创建类似旋转木马的小部件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以使用Spotify应用程序API创建其中一个填充了我选择的数据的小工具？
推荐答案
可以，使用导入/脚本/分页程序。这里有一个例子，摘录并简化自"最新动态"应用程序。您的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>
"最新消息"应用程序还有一个带有专辑插图的水平寻呼机的例子。查看this question and answer以了解如何解压该应用的源代码。
还请注意，我不确定Pager.js是否会成为公共API的一部分。如果没有，您当然可以将其解压缩到您自己的寻呼机小部件中，然后无论如何都可以使用它。
这篇关于如何在Spotify应用程序API中创建类似旋转木马的小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
