uniapp 开发微信小程序自定义背景图与导航栏

 uniapp 开发微信小程序自定义背景图与导航栏

1、page.json中使用custom自定义导航栏

{
    "path": "pages/store/store",
    "style": {
    "navigationBarTitleText": "店铺详情",
    "navigationStyle": "custom" //自定义导航栏样式
}

 

2、vue文件：

<template>
    <view class="container">
        <image src="../../static/commonbg.png" class="common-bg"></image> <!--导航栏背景图-->
            <!-- 自定义导航栏 -->

            <view class="navBarBox">
                <!-- 状态栏占位 -->
                <view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
                <!--paddingTop是导航栏的顶部到手机顶部的距离，即显示wifi和电量的部分-->
                <!-- 真正的导航栏内容 ，即与胶囊平行部分-->
                <view class="navBar" :style="{ height:navBarHeight+'px' }">
                <!-- <view>导航栏标题</view> -->

                <!--使用图片-->
                <image src="../../static/selecticon.png" class="selecticon"></image>
                <image src="../../static/smallbell.png" class="smallbell"></image>
            </view>
            <uni-icons type="left" size="30" color="#B7B7B7"></uni-icons>
        </view>
        <!-- 页面内容 -->
        <view>我是页面内容</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 状态栏高度
                statusBarHeight: 0,
                // 导航栏高度
                navBarHeight: 0,
            };
        },
        props: {

        },
        //第一次加载时调用
        created() {
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            console.log(this.statusBarHeight);
            // #ifdef MP-WEIXIN
            // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
            const custom = wx.getMenuButtonBoundingClientRect()
            console.log(custom)

            // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
            this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
            console.log("导航栏高度：" + this.navBarHeight)

            // #endif
        },
    }
</script>

<style lang="scss">
    .container {
        background: rgba(245, 247, 249, 1);
        height: 100vh;
        position: relative;

        .common-bg {
            width: 100%;
            height: 30%;
            position: absolute;
        }

        .navBarBox {
            position: absolute;
            z-index: 10;
            right: 240rpx;

            .navBar {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                .selecticon {
                    width: 62rpx;
                    height: 62rpx;
                    margin-right: 24rpx;
                }

                .smallbell {
                    width: 62rpx;
                    height: 62rpx;
                }
            }
        }
</style>

 

3、如下图