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