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

场景：近日在开发小程序的时候就，接到一个需求boss 想把小程序顶部那部分弄成一个带有我们logo的背景图片。不想要小程序的那种默认标题栏。一度考究发现是可以实现的。
实际运行结果为：

实现步骤

知识点讲解：

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

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

操作：

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

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

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

代码如下

 "navigationStyle":"custom"

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

因为取消了默认的原生导航栏，自定义导航栏，只保留右上角胶囊按钮和分享。所以文本的内容都会向上移动一定距离。
像这样：
此时在index.vue 文件最上面的内容设置为你想设置的图片，撑起页面即可，即可
代码如下：

<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>

运行结果：

以上就是全部步骤，希望对你有帮助。

小程序顶部标题栏的背景图片设置相关推荐

微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序顶部标题栏与胶囊对齐
介绍最近在做微信小程序时,顶部标题栏总是与胶囊对不齐.往往是在这款手机上对齐了,在另外一款手机差很多.我在查阅资料后,提出了一种方法解决这个问题,即:在页面onLoad或组件created时,利用微 ...
微信小程序开发：设定背景图片
文章目录前言: 一.原因与解决方法二.其他设置背景图片的方式 1.获取网络图片 2.将图片转换成base64格式 3.使用image标签前言: 今天在开发小程序的时候用到背景图片设定功能,但请求 ...
微信小程序实现页面加入背景图片以及调节透明度
在微信小程序中有时候需要在页面加入背景图片以及调节透明度让我们的小程序变得更加美观,以下是代码实现: 1.WXML <view class="bg" ><imag ...
微信小程序顶部标题栏仅保留右上角胶囊状按钮
navigationStyle, (导航栏样式,仅支持 default/custom.custom 模式可自定义导航栏,只保留右上角胶囊状的按钮),如果在app.json里面的window增加navi ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
微信小程序大型背景图片设置
微信小程序背景图片设置微信小程序通过background-image设置背景:只支持网络图片和base64图片,不支持本地图片线上图片设置步骤如下在网站https://image.kieng.c ...
微信小程序顶部透明状态标题栏搜索栏与胶囊对齐
微信小程序顶部透明状态标题栏搜索栏LOGO与胶囊对齐效果如下 App.js wx.getSystemInfo({success: res => {console.log(res)let cus ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...

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

实现步骤

小程序顶部标题栏的背景图片设置相关推荐

最新文章

热门文章