navigation 自定义导航

解释: 顶部导航bar可以自定义

# 属性说明

属性名 类型 必填 默认值 说明
backgroundColor string #fff 导航背景色

# 示例

在开发者工具中预览效果

# 扫码体验

# 代码示例

    <view class="header-top wrap {{theme}}">
        <smt-navigation background-color="{{headerBackgroundColor}}">
            <view class="header-content-custom">
                <smt-icon name="arrow-left" class="back-arrow" size="22" color="{{theme === 'dark' ? '#ffffff' : ''}}" bindtap="backAction"></smt-icon>
                <view class="header-content-area">
                    <view class="header-content-text-area">
                        <text class="header-content-title">
                            自定义导航栏
                        </text>
                        <text class="header-content-subtitle">
                            navigation
                        </text>
                    </view>
                </view>
            </view>
        </smt-navigation>
    
        <view class="smt-card-config">
            <view class="item-scroll">
                <text class="switch-text switch-text-before">沉浸式主题</text>
                <switch color="{{theme ==='dark' ? '#f5f5f5' : '#ddd'}}" class="init-switch" disabled="false" bind:change="changeTheme"></switch>
            </view>
        </view>
    </view>
    
    
    {
        "navigationBarTitleText": "icon",
        "backgroundColorTop": "#f5f5f5",
        "backgroundColor": "#f5f5f5",
        "navigationStyle": "default",
        "usingComponents": {
            "smt-navigation": "@smt-ui/component/src/navigation",
            "smt-icon": "@smt-ui/component/src/icon"
        }
    }
    
    Page({
        data: {
            headerBackgroundColor: '#f5f5f5'
        },
        changeTheme(e) {
            let checked = e.detail.checked;
            this.setData({
                headerBackgroundColor: checked ? '#3670c2' : '#f5f5f5',
                theme: checked ? 'dark' : ''
            });
            swan.setNavigationBarColor({
                frontColor: checked ? '#ffffff' : '#000000',
                backgroundColor: checked ? '#3670c2' : '#f5f5f5'
            });
            swan.setBackgroundColor({
                backgroundColor: checked ? '#3670c2' : '#f5f5f5'
            });
        },
        backAction() {
            swan.navigateBack();
        }
    });
    
    
    .wrap {
        background: #f5f5f5;
        padding: 0;
        height: 100%;
    }
    
    .header-content-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        width: 100%;
    }
    .header-content-area {
        height: 100%;
        flex: 1;
        box-sizing: border-box;
    }
    .header-content-text-area {
        left: 275rpx;
        top: 11px;
        position: absolute;
        width: 200rpx;
        text-align: center;
    }
    .dark .header-content-area {
        color: #fff;
    }
    .wrap .smt-card-area {
        margin: 25.362rpx 0 72.464rpx;
        background: #fff;
    }
    .wrap .area-content {
        height: 635.87rpx;
    }
    .wrap .init-switch {
        vertical-align: middle;
        margin: 28.986rpx 0;    
    }
    .wrap .switch-text-before {
        margin-top: 38.043rpx;
        font-size: 28.986rpx;
        color: #333;
    }
    .wrap .smt-card-config {
        background: #fff;
        overflow: hidden;
        margin-top: .47rem;
        display: block;
    }
    .smt-card-config .item-scroll {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .header-content-title {
        display: block;
        text-align: center;
        font-size: .17rem;
        color: #000;
        z-index: 99;
    }
    
    .dark .header-content-title {
        color: #fff;
    }
    
    .header-content-subtitle {
        display: block;
        font-size: .13rem;
        color: #999;
        z-index: 99;
    }
    
    .dark .header-content-subtitle {
        color: var(--dark-page-status-desc, rgba(255, 255, 255, .6));
    }
    
    .wrap .item-logo {
        display: inline-block;
        width: 32.609rpx;
        height: 32.609rpx;
        margin: 34.005rpx 0;
    }
    .page-status-hover {
        opacity: .2;
    }
    .wrap.dark {
        background-color: #3670c2;
    }
    .wrap.dark .smt-card-config {
        background-color: #4985da;
    }
    .wrap.dark .switch-text-before {
        color: #fff;
        background: #4985da;
    }
    .wrap.dark .mode-title-line-left {
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
        opacity: .3;
    }
    .wrap.dark .mode-title-line-right {
        background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
        opacity: .3;
    }
    .wrap.dark .mode-title-text {
        color: #fff;
    }
    .wrap.dark .border-bottom:after {
        transform: scaleY(.5);
        background: #73a5eb;
    }
    .wrap.dark .theme {
        color: #fff;
        background-color: #4985da;
    }
    .wrap.dark .swan-switch-input:after {
        background: #38f;
    }