Uniapp设置页面的背景图片以及去除原生导航栏

•  Uniapp设置页面的背景图片

其实就是给盒子设置背景图片，这个背景图片是紧贴着盒子的

如果不设置盒子大小，那么它也无法显示出来 

<template>
<view class="content" :style="{background: 'url('+imageURL+')'}">
<!-- 如果是设置background-image则写成：
<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}"> -->
</view>
</template>
<script>
export default {
    data() {
        return {imageURL: '/static/navigation/validCode_back.png'};
    }
}
</script>

 注意：很多情况下都要搭配属性——背景图片大小使用

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

•  去除原生导航栏

补充：要到pages.json文件全局配置选项添加属性下方

"navigationStyle": "custom"

意思就是取消掉原生导航栏，自己设计导航栏，全局都可装载内容

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>
<style>
    .status_bar {
        // 这个是导航栏的高度设置，最好自己添加高度(50px)
        height: var(--status-bar-height); 
        width: 100%;
    }
</style>

查考模板 ：

<template>
	<view class="container">
		<view class="content">
			<!-- Uniapp设置页面的背景图片 -->
			<view class="status_bar" :style="{background: 'url('+imageURL+')'}">
				<!-- 这里是状态栏 -->
				<image src="/static/images/菜单标.png" mode=""></image>
			</view>
			<view> 状态栏下的文字 </view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imageURL: '/static/images/导航栏背景.png'
			};
		}
	}
</script>

<!-- 这里注意加这个lang=‘scss’属性 译为超级css -->
<style lang="scss">
	.status_bar {
		height: 49px;
		width: 100%;
		image {
			width: 24px;
			height: 24px;
		}
	}
</style>