微信小程序怎么實現音樂播放器

本篇內容介紹了“微信小程序怎么實現音樂播放器”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

 　　開始構建小程序首頁。

　　第一步，我們需要創建頂部的導航欄

　　為每個標簽的每個狀態(選中/未選中)創建一個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，從而更新界面。

“微信小程序怎么實現音樂播放器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！