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

Posted 2021-12-10 杨校老师

编写 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:{
 
  }
  
})

展示:

---

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

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>

2. 接下来修改 index.wxml 为swiper组件的current添加属性item

<swiper current="{{item}}" >

3. 接下来修改 index.js 将item和changeItem增加在js代码中

Page({
  data:{
    item:0
  },
  changeItem:function(e){
      this.setData({
        item:e.target.data.item
      })
  }
})

4. 接下来修改 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>

5. 接下来修改 index.wxss

.tab-item.active{
  color: #b48a76;
  border-bottom-color: #fff000;
}

6. 效果展示:

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

7. 为了更改tab内的下划线颜色等特性，需要修改index.wxml ，为swiper添加绑定事件 bindchange

<view class="content">
    <swiper current="{{item}}" bindchange="changeTab"> <!-- 补充该行代码-->

8. 修改index.js文件

Page({
  data:{
    item:0,
    tab:0 //  补充该行代码
  },

9. 修改index.js文件 添加 changeTab 事件处理函数 实现tab值更改

changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  }

10. 最后效果: