新聞中心
- navigation 自定義導(dǎo)航
- 屬性說明
- 示例
- 代碼示例 1:type 默認(rèn)為 default(默認(rèn)模式)
- 代碼示例 2:type默認(rèn)為switchNav(切換模式)
- Bug & Tip
navigation 自定義導(dǎo)航
解釋:頂部自定義的導(dǎo)航欄,支持配置返回首頁、上一頁按鈕,和滑動(dòng)切換效果主題。設(shè)計(jì)文檔詳見頂部導(dǎo)航欄。

成都創(chuàng)新互聯(liá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)銷、和平企業(yè)策劃、和平品牌公關(guān)、搜索引擎seo、人物專訪、企業(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
屬性說明
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
type | String | 否 | default | 自定義導(dǎo)航類型。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 | 是否顯示首頁圖標(biāo) |
backIconSize | String | 否 | 35.02rpx | 返回圖標(biāo)大小 |
homeIconSize | String | 否 | 35.02rpx | 顯示首頁圖標(biāo)大小 |
backHdl | EventHandle | 否 | 無 | 點(diǎn)擊返回圖標(biāo)的回調(diào)事件 |
homeHdl | EventHandle | 否 | 無 | 點(diǎn)擊首頁圖標(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)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(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ì)指南
訪問小程序首頁時(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)參考開發(fā)文檔詳見全局配置 。
正確
左側(cè)城市選擇功能與右側(cè)膠囊水平對(duì)齊。
錯(cuò)誤
左側(cè)城市選擇功能與右側(cè)膠囊未水平對(duì)齊。
訪問小程序其他頁面(非首頁)時(shí),除展現(xiàn)菜單與關(guān)閉外,左上角還會(huì)展現(xiàn)返回功能,用于返回上一頁面,不支持隱藏或調(diào)整位置,因此設(shè)置自定義功能時(shí)請(qǐng)合理避讓。自定義功能所需圖標(biāo),建議使用 Smart UI 官方設(shè)計(jì)資產(chǎn),保證圖標(biāo)設(shè)計(jì)的一致性,技術(shù)實(shí)現(xiàn)請(qǐng)參考開發(fā)文檔 icon 圖標(biāo)。
錯(cuò)誤
自定義功能避讓返回功能,位置合理舒適。
錯(cuò)誤
自定義功能未避讓返回功能,回首頁與返回功能重疊體驗(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)注意與頁面內(nèi)容背景顏色一致。
Bug & Tip
- Tip:當(dāng)
swanNativeVersion>=2.28.0時(shí),小程序框架將回收二級(jí)頁面(非首頁 / 非 Tab 頁)左上角返回按鈕的自定義權(quán)限。在小程序二級(jí)頁面使用自定義導(dǎo)航欄時(shí),小程序框架將提供統(tǒng)一的返回按鈕控制方案。詳情請(qǐng)參考非兼容性升級(jí)。
網(wǎng)站欄目:創(chuàng)新互聯(lián)百度小程序教程:navigation自定義導(dǎo)航
本文鏈接:http://fisionsoft.com.cn/article/cohgsei.html


咨詢
建站咨詢
