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

2020-09-27

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

　　開始構建小程序首頁。

　　第一步，我們需要創建頂部的導航欄，效果應該類似圖：

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

　　為了實現這一效果，這里采取一個比較簡單的做法，為每個標簽的每個狀態(選中/未選中)創建一個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，從而更新界面。

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

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

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

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

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