h5模拟导航栏滑动渐变

查看视频

由于原生的导航栏自定义有限，使用plus.nativeObj.View自己来画又太费劲了，所以使用h5来实现一个，分享给大家。

1. 修改pages.json，去年原生导航栏

   {  
                   "path": "nav-bar2/nav-bar2",  
                   "style": {  
                       "navigationBarTitleText": "NavBar 导航栏",  
                       "app-plus": {  
                           "titleNView": false  
                       }  
                   }  
               }

   2、页面

   
   <template>  
   <view style="display: flex; flex: 1;justify-content: center; background: #00BFFF;">  
       <view  style="position: fixed; width: 100%; background-color: #000000; " :style="{height: searchBgHeight + 'px', opacity:searchBgOpcity}" ></view>  
       <view class="header" :style="{'margin-top':statusBarHeight}"   
       style="background: #fff; position: fixed; width: 90%; display: flex;flex: 1;justify-content: center;box-shadow: none;border: 1px solid transparent;border-radius: 10upx;">  
           <uni-nav-bar style="box-shadow:none;"  color="#333333"   @click-left="showCity" @click-right="scan">  
               <block slot="left">  
                   <view class="city">  
                       <view>北京北京</view>  
                       <uni-icon type="arrowdown" color="#333333" size="22"></uni-icon>  
                   </view>  
               </block>  
               <view class="input-view">  
                   <input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />  
                   <uni-icon type="search" size="22" color="#666666"></uni-icon>  
               </view>  
           </uni-nav-bar>  
       </view>  
       <view class="content">  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
           <view style="margin: 20upx;">1111</view>  
       </view>  
   
   </view>  
   </template>  

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
import uniNavBar from '@/components/uni-nav-bar2/uni-nav-bar2.vue'
import uniIcon from '@/components/uni-icon/uni-icon.vue'

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';  
export default {  
    components: {  
        uniNavBar,  
        uniIcon  
    },  
    data() {  

        return {  
            statusBarHeight: statusBarHeight,  
            searchBgHeight: '',  
            searchBgOpcity: '',  
            city: '北京北京'  
        }  
    },  
    created() {    
        let _t = this;    
        setTimeout(() => { //获取状态栏高度，setTimeout后才能调用uni.    
            uni.getSystemInfo({    
                success: function(res) {    
                    _t.searchBgHeight = res.statusBarHeight + 50  
                    _t.searchBgOpcity = 0.0  
                    console.log(_t.statusBarHeight);    
                }    
            });    
        }, 1);    
    } ,  
    methods: {  
        back() {  
            uni.navigateBack({  
                delta: 1  
            })  
        },  
        showMenu() {  
            uni.showToast({  
                title: '菜单'  
            })  
        },  
        clickLeft() {  
            uni.showToast({  
                title: '左侧按钮'  
            })  
        },  
        search() {  
            uni.showToast({  
                title: '搜索'  
            })  
        },  
        showCity() {  
            uni.showToast({  
                title: '选择城市'  
            })  
        },  
        scan() {  
            uni.showToast({  
                title: '扫码'  
            })  
        },  
        confirm() {  
            uni.showToast({  
                title: '搜索'  
            })  
        }  
    },  
    onPullDownRefresh() {  
        console.log('onPullDownRefresh')  
        setTimeout(function() {  
            uni.stopPullDownRefresh()  
            console.log('stopPullDownRefresh')  
        }, 1000)  
    },  
    onLoad() {  
        const pages = getCurrentPages();  
        const page = pages[pages.length - 1];  

        var that = this;  
        page.onPageScroll = function(data) {  

            let opcity = data.scrollTop  / 100;  
            if (opcity > 1) {  
                opcity = 1.0  
            }  
            that.searchBgOpcity = opcity;  
            console.log("page......searchBgOpcity==" + that.searchBgOpcity);  
        }  
    }  
}  

</script>

<style>
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff
}

view {  
    font-size: 28upx;  
    line-height: inherit  
}  
..uni-navbar--shadow {  
    box-shadow: none;  
}  

.example {  
    padding: 0 30upx 30upx  
}  

.example-title {  
    font-size: 32upx;  
    line-height: 32upx;  
    color: #777;  
    margin: 40upx 25upx;  
    position: relative  
}  

.example .example-title {  
    margin: 40upx 0  
}  

.example-body {  
    padding: 0 40upx  
}  

.uni-common-mt {  
    color: #7a7e83;  
    font-size: 28upx;  
    padding: 30upx;  
}  

.title {  
    font-size: 15px;  
    line-height: 20px;  
    color: #333333;  
    padding: 15px;  
}  

.city {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    width: 100%;  
    margin-left: 8px;  
    white-space: nowrap;  
}  

.input-view {  
    width: 92%;  
    display: flex;  
    height: 30px;  
    border-radius: 15px;  
    padding: 0 4%;  
    flex-wrap: nowrap;  
    margin: 3px 0;  
    line-height: 30px;  
}  

.input-view .uni-icon {  
    line-height: 30px !important;  
}  

.input-view .input {  
    height: 30px;  
    line-height: 30px;  
    width: 94%;  
    padding: 0 3%;  
}  

</style>

3、修改到Hello-uni-app中的一个uni-nav-bar.vue，修改名称叫uni-nav-bar2.vue  
<template>  
    <view class="uni-navbar">  
        <view class="uni-navbar__content" :class="{'uni-navbar--fixed': !!fixed}" :style="{'background-color':backgroundColor}" style="width: 100%;">  

            <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__header-container">  
                    <view v-if="title.length" class="uni-navbar__header-container-inner">{{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>  
        <view class="uni-navbar__placeholder" v-if="fixed">  
            <uni-status-bar v-if="statusBar"></uni-status-bar>  
            <view class="uni-navbar__placeholder-view"></view>  
        </view>  
    </view>  
</template>  

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

    export default {  
        name: 'uni-nav-bar',  
        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: 'transparent'  
            },  
            statusBar: {  
                type: [Boolean, String],  
                default: false  
            },  
            shadow: {  
                type: [String, Boolean],  
                default: true  
            },  
            border: {  
                type: [String, Boolean],  
                default: true  
            }  
        },  
        methods: {  
            onClickLeft() {  
                this.$emit('click-left')  
            },  
            onClickRight() {  
                this.$emit('click-right')  
            }  
        }  
    }  
</script>  

<style>  
    @charset "UTF-8";  

    .uni-navbar__content {  
        display: block;  
        position: relative;  
        width: 100%;  
        /* background-color: #fff; */  
        overflow: hidden  
    }  

    .uni-navbar__content view {  
        line-height: 44px  
    }  

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

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

    .uni-navbar__header-btns:first-child {  
        padding-left: 0  
    }  

    .uni-navbar__header-btns:last-child {  
        width: 60upx  
    }  

    .uni-navbar__header-container {  
        width: 100%;  
        margin: 0 10upx  
    }  

    .uni-navbar__header-container-inner {  
        font-size: 30upx;  
        text-align: center;  
        padding-right: 60upx  
    }  

    .uni-navbar__placeholder-view {  
        height: 38px  
    }  

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

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

    .uni-navbar--border:after {  
        position: absolute;  
        z-index: 3;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        height: 1px;  
        content: '';  
        -webkit-transform: scaleY(.5);  
        transform: scaleY(.5);  
        background-color: #c8c7cc  
    }  
</style>