微信小程序将导航栏改为自定义图片

晟晟今天吃可爱多了没有

已于 2024-01-26 09:07:55 修改

阅读量625

点赞数 10

文章标签：微信小程序小程序

于 2024-01-26 09:02:05 首次发布

本文链接：https://blog.csdn.net/weixin_43638614/article/details/135857778

版权

直接上代码

先在pags.json文件中将导航栏改成自定义：

"style" : {
		  		"navigationStyle": "custom",
		  		"navigationBarTitleText": "标题"
		  }

然后直接在页面内添加背景图：

<template>
	<view class="page-index">
		<!-- 背景图 -->
		<image class="bg-img"
			src="https://xxxx.xxxx.com/profile/upload/2024/01/26/7fbdaaf4-4b0a-4080-8cb7-bf7894ff6784.png"></image>
		<view class="bg-text">标题</view>
		<!-- 内容 -->
		<view class="staple" >
			<view class="flex " style="margin:20rpx 30rpx;border-radius: 20rpx;background-color: #f0fafe;">
				<view class=" padding-xs margin-sm radius"
					style="margin-right: 0rpx;font-size: 12px;background: #36d164;color: white;">NEWS
				</view>
				<view style="background-color: #f0fafe;">
					<u-notice-bar bg-color="#f0fafe" type="none" :volume-icon="false" :list="titleRun"
						style="position: absolute;margin-top: 6rpx;"></u-notice-bar>
				</view>
			</view>
		</view>
	</view>
</template>

样式：

.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.bg-text {
		text-align: center;
		margin-top: 120rpx;
		font-weight: 800;
	}

	.staple {
		margin-top: 40rpx;
	}