微信小程序——導航欄組件

組件內屬性詳解

屬性	類型	默認值	必填	說明
nav-postion	String	relative	否	導航欄（包含導航欄以及狀態欄）的position，可取值relative、fixed、absolute
nav-color	String	transparent	否	導航欄（包含導航欄以及狀態欄）背景色
nav-bar-style	String	default	否	導航欄樣式，可取值為default、capsule、capsule-diy、diy
nav-bar-title	String	空	否	導航欄標題
nav-bar-title-color	String	#222	否	導航欄標題顏色
bindtapCapsuleRight	eventhandle		是	當 nav-bar-style 為 capsule 時候，需要用來響應點擊左側膠囊右邊區域函數

 

nav-bar-style 屬性

capsule-diy ：

slot 的 name	說明
capsule-left	自定義膠囊左側區域
capsule-right	自定義膠囊右側區域

 

 

 

 

 

 

使用案例：

.json 文件：  "usingComponents": { "nav-bar":"../../components/nav-bar/nav-bar"} 

.wxml文件：

<!--頂部導航欄-->
<nav-bar nav-bar-style="capsule-diy">
    <view slot="capsule-left"></view>
    <view slot="capsule-right"></view>
</nav-bar>

diy:

slot 的 name	說明
navBar-diy	導航欄左側可自定義區域

 

 

使用案例：

.json 文件：  "usingComponents": { "nav-bar":"../../components/nav-bar/nav-bar"} 

.wxml文件：

<!--頂部導航欄-->
<nav-bar nav-bar-style="diy">
    <view class="navBar-diy"></view>
</nav-bar>

 

組件使用詳解

1.下載本組件。（組件鏈接）

2.打開微信小程序開發工具，在項目的根目錄創建 components 文件夾，然后將解壓后的組件文件夾拖動到剛剛創建的 components 文件夾下。入下圖所示：

 

 

 3.打開需要引用自定義導航欄的頁面的 .json 文件，然后寫入代碼   "navigationStyle":"custom"  (含義為：指定本頁面為自定義導航欄頁面）。

4.引入組件，同樣在 .json 文件中。引入 nav-bar 組件。下圖為 usingComponents 配置詳解以及使用方法。

 

 

 

 

 5.在頁面中引入組件。在你需要的位置，引入組件。（下圖箭頭所指的 nav-bar 和上圖 引入位置的 key 是一樣的）

 相關的開發案例：