uni-app 利用uni-nav-bar组件设置导航栏透明渐变样式

官方的演示文件里有个uni-nav-bar,在需要的时候可以很好的自定义导航栏！

<template>  
    <view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}" :style="{'background-color':backgroundColor}">  
        <uni-status-bar v-if="insertStatusBar"></uni-status-bar>  
        <view class="uni-navbar-header" :style="{color:color}">  
            <view class="uni-navbar-header-btns" @tap="onClickLeft">  
                <view v-if="leftIcon.length">  
                    <uni-icon :type="leftIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <view v-if="leftText.length" class="uni-navbar-btn-text" :class="{'uni-navbar-btn-icon-left':!leftIcon.length}">{{leftText}}</view>  
                <slot name="left"></slot>  
            </view>  
            <view class="uni-navbar-container">  
                <view v-if="title.length" class="uni-navbar-container-title">{{title}}</view>  
                <!-- 标题插槽 -->  
                <slot></slot>  
            </view>  
            <view class="uni-navbar-header-btns" @tap="onClickRight">  
                <view v-if="rightIcon.length">  
                    <uni-icon :type="rightIcon" :color="color" size="24"></uni-icon>  
                </view>  
                <!-- 优先显示图标 -->  
                <view v-if="rightText.length&&!rightIcon.length" class="uni-navbar-btn-text">{{rightText}}</view>  
                <slot name="right"></slot>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import uniStatusBar from './uni-status-bar.vue'  
    import uniIcon from './uni-icon.vue'  

    export default {  
        components: {  
            uniStatusBar,  
            uniIcon  
        },  
        props: {  
            /**  
             * 标题文字  
             */  
            title: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮文本  
             */  
            leftText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮文本  
             */  
            rightText: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 左侧按钮图标  
             */  
            leftIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 右侧按钮图标  
             */  
            rightIcon: {  
                type: String,  
                default: ''  
            },  
            /**  
             * 是否固定在顶部  
             */  
            fixed: {  
                type: [Boolean, String],  
                default: false  
            },  
            /**  
             * 按钮图标和文字颜色  
             */  
            color: {  
                type: String,  
                default: '#000000'  
            },  
            /**  
             * 背景颜色  
             */  
            backgroundColor: {  
                type: String,  
                default: '#FFFFFF'  
            },  
            /**  
             * 是否包含状态栏，默认固定在顶部时包含  
             */  
            statusBar: {  
                type: [Boolean, String],  
                default: ''  
            },  
            /**  
             * 是否使用阴影，默认根据背景色判断  
             */  
            shadow: {  
                type: String,  
                default: ''  
            }  
        },  
        computed: {  
            isFixed() {  
                return String(this.fixed) === 'true'  
            },  
            insertStatusBar() {  
                switch (String(this.statusBar)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return this.isFixed  
                }  
            },  
            hasShadow() {  
                var backgroundColor = this.backgroundColor  
                switch (String(this.shadow)) {  
                    case 'true':  
                        return true  
                    case 'false':  
                        return false  
                    default:  
                        return backgroundColor !== 'transparent' && backgroundColor.indexOf('rgba') < 0  
                }  
            }  
        },  
        methods: {  
            /**  
             * 左侧按钮点击事件  
             */  
            onClickLeft() {  
                this.$emit('clickLeft')  
                this.$emit('click-left')  
            },  
            /**  
             * 右侧按钮点击事件  
             */  
            onClickRight() {  
                this.$emit('clickRight')  
                this.$emit('click-right')  
            }  
        }  
    }  
</script>  

<style>  
    .uni-navbar {  
        display: block;  
        position: relative;  
        width: 100%;  
        background-color: #FFFFFF;  
        overflow: hidden;  
    }  

    .uni-navbar view{  
        line-height:44px;  
    }  

    .uni-navbar-shadow {  
        box-shadow: 0 1px 6px #ccc;  
    }  

    .uni-navbar.uni-navbar-fixed {  
        position: fixed;  
        z-index: 998;  
    }  

    .uni-navbar-header {  
        display: flex;  
        flex-direction: row;  
        width: 100%;  
        height:44px;  
        line-height:44px;  
        font-size: 16px;  
    }  

    .uni-navbar-header .uni-navbar-header-btns{  
        display:inline-flex;  
        flex-wrap:nowrap;  
        flex-shrink:0;  
        width: 120upx;  
        padding:0 12upx;  
    }  

    .uni-navbar-header .uni-navbar-header-btns:first-child{  
        padding-left:0;  
    }  
    .uni-navbar-header .uni-navbar-header-btns:last-child{  
        width: 60upx;  
    }  
    .uni-navbar-container{  
        width:100%;  
        margin:0 10upx;  
    }  
    .uni-navbar-container-title{  
        font-size:30upx;  
        text-align:center;  
        padding-right: 60upx;  
    }  
</style>  

我们只需要在页面引用这个组件就可以实现导航栏的自定义了！具体的我就不描述了！
在模板文件中引入

        <uni-nav-bar fixed="true" :background-color="titleBg"  left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"  
         title="导航栏组件"></uni-nav-bar>

给导航栏背景定义一个titleBg

<script>  
    import uniNavBar from '../../../components/uni-nav-bar.vue'  
    export default {  
        data() {  
            return {  
                titleBg:'rgba(255,255,255,0)'  
            };  
        },  
        components: {  
            uniNavBar  
        },  
        methods: {  

        },  
        onPageScroll:function(e){  
            this.titleBg = 'rgba(255,255,255,'+e.scrollTop / 300+')';  
        }  
    }  
</script>

这样就完成了从透明到白色背景的滚动渐变样式了 其他颜色修改下就可以了