编写 index.json

{
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "音乐播放器",
"navigationBarTextStyle": "black"
}

编写 index.wxml

<include src="header.wxml"></include>
<view class="tab">
<view class="tab-item>音乐推荐</view>
<view class="tab-item>播放器</view>
<view class="tab-item>播放列表</view>
</view>

<view class="content">
<swiper>
<swiper-item>
<include src="info.wxml"></include>
</swiper-item>
<swiper-item>
<include src="play.wxml"></include>
</swiper-item>
<swiper-item>
<include src="playlist.wxml"></include>
</swiper-item>
</swiper>
</view>
<view class="player"></view>

编写 index.wxss

/**index.wxss**/
page{
display: flex;
flex-direction: column;
background: #17181a;
color: #fff;
height: 100%;
}
.tab{
display: flex;
}
.tab-item{
flex: 1;
font-size: 10pt;
text-align: center;
line-height: 71rpx;
border-bottom: 6rpx solid #ccc;
}
.content{
flex: 1;
}
.content > swiper{
height: 100%;
}
.player{
background: #222222;
border-top: 1rpx solid #252525;
}

创建页面① info.wxml

<view style="background: #ccc;color:#000;height:100%;">我是音乐推荐的详情</view>

创建页面② play.wxml

<view style="background: #ccc;color:#000;height:100%;">我是播放器的详情</view>

创建页面③ playlist.wxml

<view style="background: #ccc;color:#000;height:100%;">我是音乐列表的详情</view>

编写index.js

Page({
data:{

}

})

展示:

#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_绑定事件


升级标签页面切换的效果:

  1. 修改 index.wxml页面,为三个tab-item添加绑定事件,并且设置data-item的属性
<view class="tab">
<view class="tab-item bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item bindtap="changeItem" data-item="2">播放列表</view>
</view>
  1. 接下来修改 index.wxml 为swiper组件的current添加属性item
<swiper current="{{item}}" >
  1. 接下来修改 index.js 将item和changeItem增加在js代码中
Page({
data:{
item:0
},
changeItem:function(e){
this.setData({
item:e.target.data.item
})
}
})
  1. 接下来修改 index.wxml
<view class="tab">
<view class="tab-item {{tab == 0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item {{tab == 1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item {{tab == 2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
  1. 接下来修改 index.wxss
.tab-item.active{
color: #b48a76;
border-bottom-color: #fff000;
}
  1. 效果展示:

#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_播放列表_02#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_xml_03#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_下划线_04

通过以上效果看到 光色下划线和标题的颜色没有发生改变

  1. 为了更改tab内的下划线颜色等特性,需要修改index.wxml ,为swiper添加绑定事件 bindchange
<view class="content">
<swiper current="{{item}}" bindchange="changeTab"> <!-- 补充该行代码-->
  1. 修改index.js文件
Page({
data:{
item:0,
tab:0 // 补充该行代码
},
  1. 修改index.js文件 添加 changeTab 事件处理函数 实现tab值更改
changeTab:function(e){
this.setData({
tab:e.detail.current
})
}
  1. 最后效果:

#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_绑定事件_05#yyds干货盘点#杨校老师课堂之微信小程序音乐播放器(上)_下划线_06