前面几个文章说的是后台页面. 这一节我们说的是首页. 即index.html
我们的项目就是仿照网易云音乐(移动端).
打开控制台, 选择如下图:
基本结构
页面的基本结构:
<section id="tabs" class="globalTabs">
<ol class="tabs-nav">
<li class="active" data-tab-name="page-1"> <div class="text"> 推荐音乐 </div> </li>
<li data-tab-name="page-2"><div class="text">热歌榜</div></li>
<li data-tab-name="page-3"><div class="text">搜索</div></li>
</ol>
</section>
这是三个目录.
三个部分都在一个ol列表中, 当点击某一部分时, 显示某一部分给.
<ol class="tab-content noCollapse">
<li class="page-1 active">
<li class="page-2">page 2</li>
<li class="page-3">page 3</li>
</ol>
这里只着重介绍page-1, 其他大同小异.
对于page-1, 其结构为:
<li class="page-1 active">
<section class="playlists">
</section>
<section class="songs">
</section>
<section class="art">
</section>
</li>
图片为:
页面逻辑
- 当点击不同tab时, 切换页面, 同时高亮点击项, 去除其他高亮.
每个tab对应一个模块, 分别为page-1, page-2, page-3. index.html中的所引用的js文件都在index/中 如: index/page-1.js
在page-1模块中注册selectTab
事件, 当点击该模块时添加active类, 点击其他模块时取消active类. page-2, page-3一致.
window.eventHub.on('selectTab', (tabName)=>{
if (tabName === 'page-1') {
this.view.show() //添加active类
} else {
this.view.hide() //去除active类
}
})
//对于page-2, page-3, 只需将if中的选项替换即可
什么时候触发呢? 当然是在点击的时候触发. 在tab.js中加入如下代码:
//this.view.$el指的是tab元素
this.view.$el.on('click', '.tabs-nav > li', (e)=>{
let $li = $(e.currentTarget)
let tabName = $li.attr('data-tab-name')
$li.addClass('active')
.siblings().removeClass('active')
window.eventHub.emit('selectTab', tabName) //触发selectTab事件
})
因为我们只着重介绍page-1部分, 所以以page-1为例, 其他类似.
page-1中有是三个部分, 我么可以将其分别编为page-1-1.js, page-1-2.js, page-1-3.js. 下面以page-1-2.js举例
- 对于page-1-2.js模块, 我们还要动态加载歌曲信息部分.
先通过leanCloud的API获取全部歌曲信息:
find(){
var query = new AV.Query('Song');
return query.find().then((songs)=>{
this.data.songs = songs.map((song)=>{
return {id: song.id, ...song.attributes}
})
return songs
})
}
然后依次处理每个歌曲:
songs.map((song)=>{
let $li = $(this.template
.replace('{{song.name}}', song.name)
.replace('{{song.singer}}', song.singer)
.replace('{{song.id}}', song.id)
)
this.$el.find('ol.list').append($li) //添加到歌曲列表
})
//{{...}}中的部分是html中的占位符
在page-1.js模块中加载page-1-2.js:
loadModule2(){
let script2 = document.createElement('script')
script2.src = './js/index/page-1-2.js'
script2.onload = function(){
console.log('module2')
}
document.body.appendChild(script2)
}
修饰
我们现在有两个页面, admin.html为后台页面. index.html为前端页面. 这两个页面都有引用js文件, index.html在index/xxx.js中, 那么我们将admin.html中所引用的js文件放到admin/目录中取, 即admin/xxx.js (xxx表示文件名)