微信小程序开发之——音乐播放器-实现标签页切换(3.2.3)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

本节介绍点击标签切换页面，包含以下内容：

  • 点击tab标签卡切换content要显示的内容区域
  • 当tab被选中时，高亮显示

二 效果图

三 点击tab标签卡切换content要显示的内容区域

3.1 切换功能说明

切换标签页有两种方式：

  • 直接滑动content区域
  • 单击tab区域中的某一个tab-item切换到对应的标签页

3.2 绑定事件和data-item属性

pages/index/index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
<view class="content">
  <swiper current="{{item}}">
    <swiper-item>
      <include src="info.wxml"/>
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"/>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"/>
    </swiper-item>
  </swiper>
</view>

说明：

  • data-item的值表示swiper组件中对应的swiper-item的索引
  • content区域，为swiper组件的current属性绑定变量item

pages/index/index.js

1
2
3
4
5
6
7
8
9
10
11
Page({
 data: {
  item:0,
  tab:0
 },
 changeItem:function(e){
  this.setData({
   item:e.target.dataset.item
  })
 },
}

四 当tab被选中时，高亮显示

4.1 思路

在切换标签页后，还需要改变当前标签页对应的tab-item的样式，将文本颜色和底部的线条颜色设为红色，表示当前标签页处于活跃状态

增加一个tab变量，通过判断变量tab的值，来为当前活跃的data-item增加一个active样式

4.2 pages/index/index.wxml

1
2
3
4
5
<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>

4.3 pages/index/index.wxss

1
2
3
4
.tab-item.active{
  color:#c25b5b;
  border-bottom-color: #c25b5b;
}

4.4 swiper组件绑定事件(pages/index/index.wxml)

1
2
3
4
<!--内容区域-->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
</view>

4.5 changeTab事件中变量tab和事件

1
2
3
4
5
6
7
8
9
data: {
    item:0,
    tab:0
  },
changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  },