uniapp自定义导航栏以及页面加背景
如果想给uniapp的页面加背景图片的话，疯狂度了之后会发现uniapp中背景图片用本地图片不起效果，所以一般用网络路径，之后又会发现，页面如果直接加背景的话有可能会遇到页面内容不够，背景撑不满整个页面，如果给页面根元素加 height: 100vh;的话页面上的东西就没法滚动了，所以最好是结合scroll-view一起做。
pages.json中：
{"path": "pages/hotelInfo/hotelInfo","style": {"navigationStyle": "custom", //自定义导航栏"enablePullDownRefresh": false, //关闭页面下拉刷新"disableScroll": true //不允许页面滑动}}
页面：
<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>