一 概述
本节介绍点击标签切换页面,包含以下内容:
- 点击tab标签卡切换content要显示的内容区域
- 当tab被选中时,高亮显示
二 效果图
三 点击tab标签卡切换content要显示的内容区域
3.1 切换功能说明
切换标签页有两种方式:
- 直接滑动content区域
- 单击tab区域中的某一个tab-item切换到对应的标签页
3.2 绑定事件和data-item属性
pages/index/index.wxml
<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
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
<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
.tab-item.active{
color:#c25b5b;
border-bottom-color: #c25b5b;
}
4.4 swiper组件绑定事件(pages/index/index.wxml)
<!--内容区域-->
<view class="content">
<swiper current="{{item}}" bindchange="changeTab">
</view>
4.5 changeTab事件中变量tab和事件
data: {
item:0,
tab:0
},
changeTab:function(e){
this.setData({
tab:e.detail.current
})
},