微信小程序自定義導(dǎo)航欄及其封裝的全過程

更新時間：2022年12月02日 10:09:51 作者：東非不開森

在小程序項目開發(fā)過程中常遇到自定義導(dǎo)航欄的需求,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航欄及其封裝的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、導(dǎo)航欄適配

1.1.在json文件里更改頁面配置項

???

官方文檔介紹的有：

"navigationStyle": "custom"
這樣原本默認(rèn)的導(dǎo)航欄就會消失了

PS: 如果是單頁面需要就寫在對應(yīng)頁面的json內(nèi)，如果全局需要就寫在app.josn內(nèi)

1.2.導(dǎo)航欄適配每種機(jī)型

???

在app.js 里面獲取statusbarHeight（這個就是每種機(jī)型的導(dǎo)航高度，我們需要獲取并且動態(tài)的展示）

wx.getSystemInfo獲取。

我們要在對應(yīng)該導(dǎo)航組件的js文件里面進(jìn)行獲取

data中定義一個數(shù)據(jù)
在動態(tài)從app.js中獲取
將獲取到的statusBarHeight，存儲到data中

在wxml里面動態(tài)的使用該數(shù)據(jù)

這樣機(jī)型適配就完成啦o(￣︶￣)o

二、封裝導(dǎo)航欄組件

?????

2.1.wxml

這里我們使用了插槽（可以看看插槽的內(nèi)容）

<!--components/nav-bar/nav-bar.wxml-->
<view class="nav-bar">
  <view class="status" style="height: {{statusHeight}}px;"></view>
    <view class="nav">
      <view class="left">
        <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>

2.2.wxss

???

這里主要控制導(dǎo)航欄顯示的位置
還有默認(rèn)插槽用通過css3的偽類:empty，class="default"的view盒子默認(rèn)的樣式是display: none隱藏的，如果class="slot"的view盒子為空時，那么就會將class="default"的view盒子的樣式設(shè)為display: flex（因為小程序是默認(rèn)不顯示默認(rèn)插槽的）

/* components/nav-bar/nav-bar.wxss */
/* 自定義導(dǎo)航 */
.nav {
  display: flex;
  height: 44px;
  color: #fff;
}

.left, .right, .center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav .left, .nav .right {
  width: 120rpx;
}

.nav .center {
  flex: 1;
}

/* 控制內(nèi)容顯示 */
.left .icon {
  width: 40rpx;
  height: 40rpx;
}

.default {
  display: none;
}

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

2.3.js

在properties下設(shè)置標(biāo)題
在options開啟多個插槽

// components/nav-bar/nav-bar.js

const app = getApp()
Component({
  options: {
    multipleSlots: true
  },
  properties:{
    title: {
      type: String,
      value: "導(dǎo)航標(biāo)簽"
    }
  },
  data:{
    statusHeight:20
  },
  lifetimes: {
    attached(){
      this.setData({statusHeight: app.globalData.statusHeight})
    }
  }
})