注冊

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

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。

  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為控制這一組件的值,當(dāng)currentView=1時,根據(jù)wx:if屬性,只有帶下邊框的“推薦”view與不帶下邊框的“排行”,“檢索”會被渲染,也就實現(xiàn)了我們想要的結(jié)果?! ?/p>

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

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

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

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

重磅推薦:小程序開店目錄

第一部分:小商店是什么

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

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)