建站
咨詢
售后
建站咨詢
新聞中心
- navigation 自定義導航
- 屬性說明
- 示例
- 代碼示例 1：type 默認為 default（默認模式）
- 代碼示例 2：type默認為switchNav（切換模式）
- Bug & Tip
navigation 自定義導航
解釋：頂部自定義的導航欄，支持配置返回首頁、上一頁按鈕，和滑動切換效果主題。設計文檔詳見頂部導航欄。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站設計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設公司、和平網(wǎng)絡推廣、成都微信小程序、和平網(wǎng)絡營銷、和平企業(yè)策劃、和平品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供和平建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
屬性說明
| 屬性名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
type | String | 否 | default | 自定義導航類型。default：默認，switchNav：切換導航欄模式。注：切換模式下，常規(guī)參數(shù)均配置在 commonBar 和 fixedBar 中 |
backgroundColor | String | 否 | #fff | 導航背景色 |
frontColor | String | 否 | #000 | 前景顏色（目前特指字體顏色） |
opacity | Number | 否 | 1 | 導航背景透明度 |
navigationStyle | Object | 否 | {} | 導航容器自定義樣式（加在行間樣式上） |
navigationAreaStyle | Object | 否 | {} | 導航內(nèi)容可視區(qū)自定義樣式（加在行間樣式上） |
backIcon | Boolean | 否 | false | 是否顯示返回圖標 |
homeIcon | Boolean | 否 | false | 是否顯示首頁圖標 |
backIconSize | String | 否 | 35.02rpx | 返回圖標大小 |
homeIconSize | String | 否 | 35.02rpx | 顯示首頁圖標大小 |
backHdl | EventHandle | 否 | 無 | 點擊返回圖標的回調(diào)事件 |
homeHdl | EventHandle | 否 | 無 | 點擊首頁圖標的回調(diào)事件 |
isFullScreenWidth | Boolean | 否 | false | 寬度是否撐滿屏幕 |
switchStartPosition | Number | 否 | statusBarHeight | 切換模式下，導航欄切換的起始位置，默認狀態(tài)欄的高度 |
switchEndPosition | Number | 否 | 100 | 切換模式下，導航欄切換切換結束的位置 |
commonBar | Object | 否 | { | 切換模式下，初始的導航樣式 |
fixedBar | Object | 否 | { | 切換模式下，滾動后的導航樣式 |
示例
跳轉編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗
代碼示例
請使用百度APP掃碼
代碼示例 1：type 默認為 default（默認模式）
- SWAN
- JS
- CSS
- JSON
backIcon="{{backIcon}}"homeIcon="{{homeIcon}}"bindbackHdl="backHandler"bindhomeHdl="homeHandler">頂部標題
代碼示例 2：type默認為switchNav（切換模式）
- SWAN
- JS
- CSS
- JSON
type="switchNav"commonBar="{{commonBar}}"fixedBar="{{fixedBar}}"bindbackHdl="backHandler"bindhomeHdl="homeHandler"switchStartPosition="{{1000}}">
設計指南
訪問小程序首頁時，自定義導航欄默認展現(xiàn)右側菜單與關閉功能。左側自定義區(qū)域可呈現(xiàn)選擇城市、搜索框等功能。注意左側自定義區(qū)域內(nèi)容應與右側的膠囊水平對齊。技術實現(xiàn)請參考開發(fā)文檔詳見全局配置 。
正確
左側城市選擇功能與右側膠囊水平對齊。
錯誤
左側城市選擇功能與右側膠囊未水平對齊。
訪問小程序其他頁面（非首頁）時，除展現(xiàn)菜單與關閉外，左上角還會展現(xiàn)返回功能，用于返回上一頁面，不支持隱藏或調(diào)整位置，因此設置自定義功能時請合理避讓。自定義功能所需圖標，建議使用 Smart UI 官方設計資產(chǎn)，保證圖標設計的一致性，技術實現(xiàn)請參考開發(fā)文檔 icon 圖標。
錯誤
自定義功能避讓返回功能，位置合理舒適。
錯誤
自定義功能未避讓返回功能，回首頁與返回功能重疊體驗欠佳。
自定義配置容器背景（backgroundColor）顏色時，請重點關注信息的可識別性和整體閱讀舒適度。狀態(tài)欄顏色與頂部導航欄顏色一致。
正確
導航欄背景與元素搭配舒適、內(nèi)容易讀性佳。
錯誤
導航欄背景與元素搭配不舒適、內(nèi)容易讀性差。
頂部導航欄支持上滑變色瀏覽體驗更為沉浸，請注意切換后導航背景顏色配置應注意與頁面內(nèi)容背景顏色一致。
Bug & Tip
- Tip：當
swanNativeVersion>=2.28.0時，小程序框架將回收二級頁面（非首頁 / 非 Tab 頁）左上角返回按鈕的自定義權限。在小程序二級頁面使用自定義導航欄時，小程序框架將提供統(tǒng)一的返回按鈕控制方案。詳情請參考非兼容性升級。
網(wǎng)站題目：創(chuàng)新互聯(lián)百度小程序教程：navigation自定義導航
URL地址：http://www.5511xx.com/article/cohgsei.html
