微信小程序音樂播放器,音樂播放器小程序制作步驟（首頁）

2020-09-27

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

　　開始構(gòu)建小程序首頁。

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

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

　　為了實現(xiàn)這一效果，這里采取一個比較簡單的做法，為每個標(biāo)簽的每個狀態(tài)(選中/未選中)創(chuàng)建一個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為控制這一組件的值，當(dāng)currentView=1時，根據(jù)wx：if屬性，只有帶下邊框的“推薦”view與不帶下邊框的“排行”，“檢索”會被渲染，也就實現(xiàn)了我們想要的結(jié)果?！　?/p>

　　在index.js里編寫view的點擊事件tabItemTap，這個名字跟我們在寫wxml時bindtap一致。

//獲取應(yīng)用實例
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，從而更新界面。

　　微信小程序小白項目開發(fā)案例之音樂播放器——配置項目文件

　　微信小程序小白項目開發(fā)案例之音樂播放器——推薦頁

第二部分：如何開通一個小商店