微信小程序音乐播放器,音乐播放器小程序制作步骤（首页）

—— 2020 ——

09/27

00:00

来源：

作者：未知

栏目：小程序开发

2020/9/27 0:00:00 来源：不详作者：未知

　　开始构建小程序首页。

　　第一步，我们需要创建顶部的导航栏，效果应该类似图：

　　可以看到这个导航栏由三个按键组成，三个按键平分屏幕宽度，文字居中显示，在选中后下方有绿色边框。

微信小程序音乐播放器,音乐播放器小程序制作步骤（首页）

　　为了实现这一效果，这里采取一个比较简单的做法，为每个标签的每个状态(选中/未选中)创建一个view。

<view class="tab">
<view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="1" wx:if="{{currentView==1}}">推荐</view>
<view class="tab-item" data-view="1" bindtap="tabItemTap" wx:if="{{currentView!=1}}">推荐</view>
<view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="2" wx:if="{{currentView==2}}">排行</view>
<view class="tab-item" data-view="2" bindtap="tabItemTap" wx:if="{{currentView!=2}}">排行</view>
<view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="3" wx:if="{{currentView==3}}">检索</view>
<view class="tab-item" data-view="3" bindtap="tabItemTap" wx:if="{{currentView!=3}}">检索</view>
</view>

.tab-item {
float: left;
width: 33.333333%;
height: 43px;
font-size: 16px;
text-align: center;
}
.tab-item-selected {
color: #31c27c;
border-bottom: 2px solid #31c27c;
}

　　所有6个view都享有tab-item这个class的属性，在这里定义了组件的宽度为1/3，字体居中显示以及字号。三个布局拥有tab-item-selected属性，这个属性为这个view添加了底部的绿色边框。currentView为控制这一组件的值，当currentView=1时，根据wx：if属性，只有带下边框的“推荐”view与不带下边框的“排行”，“检索”会被渲染，也就实现了我们想要的结果。　　

　　在index.js里编写view的点击事件tabItemTap，这个名字跟我们在写wxml时bindtap一致。

//获取应用实例
var app = getApp()
Page({
data: {
currentView: 1,
},
onLoad: function () {
var that = this;
},
tabItemTap: function (e) {
var _dataSet = e.currentTarget.dataset;
this.setData({
currentView: _dataSet.view
});
},
})

　　每次点击后，获取点击view的data-view的值，然后将这个值赋值给currentView，从而更新界面。

　　微信小程序小白项目开发案例之音乐播放器——配置项目文件

　　微信小程序小白项目开发案例之音乐播放器——推荐页

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

小程序会员开卡插件如何添加

　线下许多小程序都会关联会员卡，这是需要在会员开卡场景下进行，开发者必须通过开卡插件来完成添加。...

SaaS 2020/9/27 0:00:00
伊利小程序商城开发案例

伊利小程序商城“伊利牛奶京东自营旗舰店”已经悄然上线数日，由京东开普勒提供技术支持。...

SaaS 2020/9/27 0:00:00

换一换相关推荐

精选内容

热点精选

微信小程序音乐播放器,音乐播放器小程序制作步骤（首页）

小程序会员开卡插件如何添加

伊利小程序商城开发案例