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

一 概述

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

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

二 效果图

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

3.1 切换功能说明

切换标签页有两种方式：

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

3.2 绑定事件和data-item属性

pages/index/index.wxml

音乐推荐播放器播放列表

说明：

• 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

音乐推荐播放器播放列表

4.3 pages/index/index.wxss

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

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

4.5 changeTab事件中变量tab和事件

data: {item:0,tab:0},
changeTab:function(e){this.setData({tab:e.detail.current})},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！