68素材站

小程序状态栏顶部标题栏的背景图片设置

68素材 3317 0

运行效果:

995f85c8d54bef6d153ca035c87a7bdd.png

实现步骤

  • 知识点讲解:

修改 navigationStyle 字段,关于这个属性,以下是官方解释:
在uniapp中

7e55cc4d39de21705e0b8d707a5d36b6.png

使用微信小程序开发工具开发小程序时:官方解释

111.png

  • 操作:

此处我修改的页面是首页index.vue,我需要index的导航部分为图片背景。
所以,以下就以index.vue为例。

  1. 修改导航栏为自定义导航栏样式

修改需要配背景图片的页面路由的属性值,此处我修改的是index.vue的路由配置
pages.json中找到你需要配置背景图片的路由,修改它style的属性,也就是自定义导航栏样式。改为custom即取消默认的原生导航栏。

代码如下

 "navigationStyle":"custom"

222.png

  1. 然后打开index.vue文件(就是你修改了路由配置的文件)

因为取消了默认的原生导航栏,自定义导航栏,只保留右上角胶囊按钮和分享。所以文本的内容都会向上移动一定距离。

333.png

此时在index.vue 文件最上面的内容设置为你想设置的图片,撑起页面即可,即可
代码如下:

444.png

<template>
	<view class="index_view">
		<view style="overflow: hidden;height: 250upx;">
			<image src="../../static/product/topbg.png" class="top_img"></image>
		</view>
		<text>这是一段文字</text>
		<text>这是一段文字</text>
		<text>这是一段文字</text>
	</view></template>


发表评论 (已有0条评论

还木有评论哦,快来抢沙发吧~