音乐播放器自定义导航栏

音乐播放器自定义导航栏

首先，展示大概效果：

封装通用的小程序自定义导航组件

首先，在小程序中，会有一个状态栏高度，我们首先要考虑状态栏的占位，可以用 wx.getSystemInfo来获取statusBarHeight的高度，然后用此宽度的容器占位。并且我设计了用两个含有默认内容的具名插槽来保证组件的可扩展性，我的封装代码如下：

<view class="nav-bar">
  <view class="status" style="height: {{statusHeight}}px;"></view>
  <view class="nav">
    <view class="left" bindtap="onLeftClick">
      <view class="slot">
        <slot name="left"></slot>
      </view>
      <view class="default">
        <image class="icon" src="/assets/images/icons/arrow-left.png"></image>
      </view>
    </view>
    <view class="center">
      <view class="slot">
        <slot name="center"></slot>
      </view>
      <view class="default">
        {{title}}
      </view>
    </view>
    <view class="right"></view>
  </view>
</view>


//用以下css来完成默认插槽
.default {
  display: none;
}

.slot:empty + .default {
  display: flex;
}

音乐播放器的导航栏实现

在上面的具名插槽中插入内容，左侧的返回导航会触发父组件的函数，遍历pageTitles中的数据，由于导航栏中间有|分割，最后一个没有，用wx:if="{{index !== pageTitles.length - 1}}来消除最后一个|。点击导航栏切换问题，请看下文。

<nav-bar bind:leftclick="onNavBackTap">
  <view class="tabs" slot="center">
    <block wx:for="{{pageTitles}}" wx:key="*this">
      <view 
        class="item {{currentPage === index ? 'active': ''}}" 
        bindtap="onNavTabItemTap" data-index="{{index}}"
      >
        {{item}}
      </view>
      <view class="divider" wx:if="{{index !== pageTitles.length - 1}}">|</view>
    </block>
  </view>
</nav-bar>

//   pageTitles: ["歌曲", "歌词"],
 onNavBackTap() {
    wx.navigateBack()
  },
   onNavTabItemTap(event) {
    const index = event.currentTarget.dataset.index
    this.setData({ currentPage: index })
  },
   onNavTabItemTap(event) {
    const index = event.currentTarget.dataset.index
    this.setData({ currentPage: index })
  },

点击导航栏切换

考虑到切换分页，我便用swiper来做此功能，首先还是swiper的高度确定，如果设置不准会导致滑动失效，用wx.getSystemInfo函数，用 res.screenHeight - res.statusBarHeight - 自定义导航栏高度（除去状态栏，一般是44）得到高度；用 current="{{currentPage}}"来控制swiper的滚动，能改变current的一般是两个事件，点击导航栏和拖到内容栏，前者我们给导航栏data-index="{{index}}传递数据，更改currentTarget即可，后者监听

bindchange事件改变currentTarget即可.

<swiper 
  bindchange="onSwiperChange"
  style="height: {{contentHeight}}px;"
  current="{{currentPage}}"
>

wiperChange"
style=“height: {{contentHeight}}px;”
current=“{{currentPage}}”