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