百度智能小程序 自定義導航

navigation 頂部導航 bar

解釋： 頂部自定義的導航欄，其中不包含界面，僅僅是限制了開發(fā)者寫頂部 bar 內(nèi)容的區(qū)域，使之在安全區(qū)內(nèi)完成頂部內(nèi)容的渲染；支持配置返回首頁、上一頁按鈕，和滑動切換效果主題。

設(shè)計文檔詳見 頂部導航欄 。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<view class="wrap">
    <image class="iphone-image-area"  
        mode="widthFix" 
        src="{{showSwicthNav ? iphoneGifSrc : iphoneImgSrc}}"
    />
    <image class="status-image-area {{showSwicthNav ? 'hide' : ''}}"  
        mode="widthFix" 
        src="{{statusImgSrc}}"
    />
    <smt-navigation 
        navigation-style="{{navigationStyle}}"
        navigation-area-style="{{navigationAreaStyle}}"
        back-icon="{{backIcon}}"
        home-icon="{{homeIcon}}"
        front-color="#fff"
        bindbackHdl="backHdl"
        bindhomeHdl="homeHdl"
        backgroundColor="transparent">
        <view class="navigation-content-area {{showTitle ? '' : 'hide'}}">
            <text class="navigation-title">{{title}}</text>
            <text class="navigation-desc">{{desc}}</text>
        </view>
    </smt-navigation>
    <view class="btns-area">
        <button s-for="item,index in btnsList"
            type="primary"
            data-type="{{item.type}}"
            data-index="{{index}}"
            disabled="{{item.disabled}}"
            hover-stop-propagation="true"
            bind:tap="tapHdl">
            {{item.text}}
        </button>
    </view>
</view>

Page({
    data: {
        homeIcon: false,
        backIcon: false,
        btnsList: [{
            type: 'back',
            text: '顯示"返回上一頁"按鈕'
        }, {
            type: 'home',
            text: '顯示"返回首頁"按鈕'
        }, {
            type: 'both',
            text: '顯示"返回上一頁&返回首頁"按鈕'
        }, {
            type: 'switch',
            text: '點擊演示上滑頁面導航變色'
        }, {
            type: 'reset',
            text: '重置'
        }],
        iphoneImgSrc: 'https://b.bdstatic.com/miniapp/images/simulator.png',
        iphoneGifSrc: 'https://b.bdstatic.com/miniapp/images/simulator.gif',
        statusImgSrc: 'https://b.bdstatic.com/miniapp/images/smt_status.png',
        navigationStyle: {
            'position': 'relative',
            'margin-top': '-836rpx',
            'padding': '0 0 0 30.19rpx',
            'height': '30px',
            'width': '100%'
        },
        navigationAreaStyle: {
            height: '45px'
        }
    },

    /**
     * 點擊返回上一級按鈕
     *
     */
    backHdl() {
        this.changeNavHdl('上一頁面');

    },

    /**
     * 點擊返回首頁按鈕
     *
     */
    homeHdl() {
        this.changeNavHdl('小程序首頁');
    },

    /**
     * 切換模擬器公共方法
     *
     * @param {string} title 標題
     * @param {string} desc 描述
     * @param {boolean} backIcon 是否配置返回按鈕
     * @param {boolean} homeIcon 是否配置返回首頁按鈕
     */
    changeNavHdl(title) {
        this.setData({
            title,
            desc: 'detail',
            backIcon: false,
            homeIcon: false
        });
        setTimeout(() => {
            this.setData({
                showTitle: true
            });
        }, 300);
    },

    /**
     * 點擊按鈕觸發(fā)
     *
     * @param {Event} e 事件對象
     * @param {Object} e.currentTarget.dataset 該按鈕的數(shù)據(jù)對象
     */
    tapHdl(e) {
        const {type, index} = e.currentTarget.dataset;
        const homeIcon = /home|both/.test(type);
        const backIcon = /back|both/.test(type);

        this.setData({
            title: '',
            desc: '',
            homeIcon,
            backIcon,
            showTitle: false,
            showSwicthNav: type === 'switch',
            btnsList: this.data.btnsList.filter((btnVal, btnIndex) => {
                if (type === 'reset') {
                    btnVal.disabled = false;
                }
                else if (btnIndex === index) {
                    btnVal.disabled = true;
                }
                return btnVal;
            })
        });
    }
});

.wrap {
    height: 100%;
    padding: 0;
    background: #f5f5f5;
}

.hide {
    opacity: 0;
}

.header-content-custom {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
.header-content-area {
    height: 100%;
    flex: 1;
    box-sizing: border-box;
}
.wrap .smt-card-area {
    margin: 25.362rpx 0 72.464rpx;
    background: #fff;
}
.wrap .area-content {
    height: 635.87rpx;
}

.header-content-subtitle {
    z-index: 99;
    display: block;
    font-size: 23.55rpx;
    color: #999;
}

.wrap .item-logo {
    display: inline-block;
    width: 32.609rpx;
    height: 32.609rpx;
    margin: 34.005rpx 0;
}
.page-status-hover {
    opacity: .2;
}

.iphone-image-area {
    width: 702.9rpx;
    height: 580.92rpx;
    margin: 22.34rpx 23.55rpx;
}

.status-image-area {
    width: 661.84rpx;
    position: relative;
    top: -766rpx;
    left: 44rpx;
}

.btns-area {
    position: fixed;
    width: 100%;
    bottom: 18.12rpx;
    background: #f5f5f5;;
    padding-top: 12.08rpx;
}

.navigation-content-area {
    width: 100%;
    margin-left: 20%;
}

.navigation-desc {
    font-size: 23.55rpx;
}

.navigation-title,
.navigation-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .5;
}

.navigation-desc {
    opacity: .6;
}

button {
    margin: 36.23rpx 41.67rpx;
    font-size: 32.61rpx;
    line-height: 79.71rpx;
}

{
    "navigationBarTitleText": "icon",
    "navigationStyle": "custom",
    "backgroundColorTop": "#f5f5f5",
    "backgroundColor": "#f5f5f5",
    "usingComponents": {
        "smt-navigation": "@smt-ui/component/src/navigation",
        "smt-icon": "@smt-ui/component/src/icon"
    }
}

左側(cè)自定義區(qū)域可呈現(xiàn)選擇城市、搜索框等功能。注意左側(cè)自定義區(qū)域內(nèi)容應與右側(cè)的膠囊水平對齊。技術(shù)實現(xiàn)請參考開發(fā)文檔詳見 全局配置 。

直接訪問小程序某頁面（非首頁）時，頂部導航欄應提供回首頁（homeIcon）功能便于用戶操作，注意此時因未發(fā)生跳轉(zhuǎn)無需提供返回功能。

訪問某頁面（非首頁）后在小程序內(nèi)發(fā)生跳轉(zhuǎn)，自定義功能區(qū)應提供返回（backIcon）和回首頁（homeIcon）功能，從左至右依次展現(xiàn)。

自定義配置容器背景（backgroundColor）顏色時，請重點關(guān)注信息的可識別性和整體閱讀舒適度。狀態(tài)欄顏色與頂部導航欄顏色一致。

頂部導航欄支持上滑變色瀏覽體驗更為沉浸，請注意切換后導航背景顏色配置應注意與頁面內(nèi)容背景顏色一致。