微信小程序怎么实现音乐播放器

本篇内容介绍了“微信小程序怎么实现音乐播放器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

 　　开始构建小程序首页。

　　第一步，我们需要创建顶部的导航栏

　　为每个标签的每个状态(选中/未选中)创建一个view。

1. <view class="tab">

2.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="1" wx:if="{{currentView==1}}">推荐</view>

3.   <view class="tab-item" data-view="1" bindtap="tabItemTap" wx:if="{{currentView!=1}}">推荐</view>

4.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="2" wx:if="{{currentView==2}}">排行</view>

5.   <view class="tab-item" data-view="2" bindtap="tabItemTap" wx:if="{{currentView!=2}}">排行</view>

6.   <view class="tab-item tab-item-selected" bindtap="tabItemTap" data-view="3" wx:if="{{currentView==3}}">检索</view>

7.   <view class="tab-item" data-view="3" bindtap="tabItemTap" wx:if="{{currentView!=3}}">检索</view>

8. </view>

1. .tab-item {

2.   float: left;

3.   width: 33.333333%;

4.   height: 43px;

5.   font-size: 16px;

6.   text-align: center;

7. }

8. .tab-item-selected {

9.   color: #31c27c;

10.   border-bottom: 2px solid #31c27c;

11. }

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

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

1. //获取应用实例

2. var app = getApp()

3. Page({

4.     data: {

5.         currentView: 1,

6.     },

7.     onLoad: function () {

8.         var that = this;

9.     },

10.     tabItemTap: function (e) {

11.         var _dataSet = e.currentTarget.dataset;

12.         this.setData({

13.             currentView: _dataSet.view

14.         });

15.     },

16. })

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

“微信小程序怎么实现音乐播放器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！