微信小程序音樂(lè)播放器,音樂(lè)播放器小程序制作步驟（首頁(yè)）

2020-09-27

導(dǎo)讀：可以看到這個(gè)導(dǎo)航欄由三個(gè)按鍵組成，三個(gè)按鍵平分屏幕寬度，文字居中顯示，在選中后下方有綠色邊框。...

　　開(kāi)始構(gòu)建小程序首頁(yè)。

　　第一步，我們需要?jiǎng)?chuàng)建頂部的導(dǎo)航欄，效果應(yīng)該類似圖：

　　可以看到這個(gè)導(dǎo)航欄由三個(gè)按鍵組成，三個(gè)按鍵平分屏幕寬度，文字居中顯示，在選中后下方有綠色邊框。

　　為了實(shí)現(xiàn)這一效果，這里采取一個(gè)比較簡(jiǎn)單的做法，為每個(gè)標(biāo)簽的每個(gè)狀態(tài)(選中/未選中)創(chuàng)建一個(gè)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個(gè)view都享有tab-item這個(gè)class的屬性，在這里定義了組件的寬度為1/3，字體居中顯示以及字號(hào)。三個(gè)布局擁有tab-item-selected屬性，這個(gè)屬性為這個(gè)view添加了底部的綠色邊框。currentView為控制這一組件的值，當(dāng)currentView=1時(shí)，根據(jù)wx：if屬性，只有帶下邊框的“推薦”view與不帶下邊框的“排行”，“檢索”會(huì)被渲染，也就實(shí)現(xiàn)了我們想要的結(jié)果?！　?/p>

　　在index.js里編寫view的點(diǎn)擊事件tabItemTap，這個(gè)名字跟我們?cè)趯憌xml時(shí)bindtap一致。

//獲取應(yīng)用實(shí)例
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
});
},
})

　　每次點(diǎn)擊后，獲取點(diǎn)擊view的data-view的值，然后將這個(gè)值賦值給currentView，從而更新界面。

　　微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器——配置項(xiàng)目文件

　　微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器——推薦頁(yè)

第二部分：如何開(kāi)通一個(gè)小商店