uniapp自定义导航栏以及页面加背景

如果想给uniapp的页面加背景图片的话，疯狂度了之后会发现uniapp中背景图片用本地图片不起效果，所以一般用网络路径，之后又会发现，页面如果直接加背景的话有可能会遇到页面内容不够，背景撑不满整个页面，如果给页面根元素加 height: 100vh;的话页面上的东西就没法滚动了，所以最好是结合scroll-view一起做。

pages.json中：

javascript 复制代码

		{
			"path": "pages/hotelInfo/hotelInfo",
			"style": {
				"navigationStyle": "custom",	//自定义导航栏
				"enablePullDownRefresh": false,	//关闭页面下拉刷新
				"disableScroll": true			//不允许页面滑动
			}
		}

页面：

javascript 复制代码

<template>
	<view class="ye">
		<scroll-view scroll-y="true" class="scrollView" @scroll="scroll">
			<view class="fanhui" :class="{isNavbar : isNavbar}"
				:style="{paddingTop:paddingTop + 'px',height:height + 'px'}">
				<view class="content">
					<uni-icons :size="height * 0.8 + 'px'" color="#000000" type="back" @click="goBack()"></uni-icons>
					<view class="title">
						页面标题
					</view>
				</view>
			</view>
			<view class="contentC"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				paddingTop: 0,
				isNavbar: false,

			};
		},
		onLoad(query) {
			//设置导航条参数
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.paddingTop = menuButtonInfo.top;
			this.height = menuButtonInfo.height;
		},
		methods: {
			goBack() {
				// uni.navigateBack()
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			scroll(e){
				console.log(e)
				const scrollTop = e.detail.scrollTop;
				// 导航条颜色透明渐变
				if (scrollTop <= 50) {
					this.isNavbar = false
				} else {
					this.isNavbar = true
				}
			}
		}
	};
</script>

<style lang="scss">
	.ye {
		height: 100vh;

		@keyframes backgroundColorAnimation {
			0% {
				background-color: transparent;
			}

			100% {
				background-color: #fef2e9;
			}
		}

		.isNavbar {
			background-color: #fef2e9;
			animation: backgroundColorAnimation 0.5s;
		}

		.fanhui {
			z-index: 9;
			width: 100%;
			color: #100F0F;
			position: fixed;

			.content {
				width: 94%;
				height: 100%;
				margin: 0 auto;

				display: flex;
				align-items: center;

				.title {
					font-weight: 500;
					font-size: 32rpx;

					left: 50%;
					position: absolute;
					transform: translateX(-50%);
				}

			}
		}

		.scrollView {
			width: 100%;
			height: 100%;
			background-image: url("https://cdn.15803565366.com/uniapp/bg.png");
			background-repeat: no-repeat;
			background-size: cover;
		}
		
		.contentC{
			padding: 26rpx;
			box-sizing: border-box;
		}
	}
</style>