首页tab切换

版权声明： https://blog.csdn.net/Helloyongwei/article/details/81659939

前面几个文章说的是后台页面. 这一节我们说的是首页. 即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表示文件名）