微信小程序设置单个页面自定义头部为背景图

最新推荐文章于 2024-12-11 11:47:31 发布

Cimbala

最新推荐文章于 2024-12-11 11:47:31 发布

阅读量4.5k

点赞数 1

分类专栏： # 微信小程序开发文章标签：微信小程序 vue.js 小程序

本文链接：https://blog.csdn.net/cimbala/article/details/124807087

版权

微信小程序开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

第一步：挑选好需要显示的图片。
第二步：在`pages.json`文件中添加`navigationStyle`样式。
第三步：编写`.vue`文件
效果图

第一步：挑选好需要显示的图片。

裁剪好尺寸，存放在static目录下。
在这里插入图片描述

第二步：在`pages.json`文件中添加`navigationStyle`样式。

想要在哪个页面自定义头部背景图就在pages页面节点下设置navigationStyle样式。

"navigationStyle":"custom",

在这里插入图片描述

第三步：编写`.vue`文件

<view class="login-location-css">	
</view>

.login-location-css{
	width: 100%;
	height: 180px;
	display: list-item;
	background-image: url(../../static/backgroundimages/sky.png);
	// background-image: url(../../static/backgroundimages/sundowner.png);
	background-size: cover;
}