uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)

简介: uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)

问题描述

今天拿到小程序的设计效果图后,标题部分背景需要加背景图片,以往我做的都是标题背景更换颜色等,加背景图片还是第一次遇到,大家可以先看下我的效果图是否与你遇到的问题一致!

首页标题的背景是个背景图片。

解决方案

pages.json文件里找到,配置首页地址的代码(我这边以首页为例,如何你是其它的页面,就去找对应的配置地址代码),

加上这段代码"navigationStyle":"custom"

"navigationStyle":"custom"意思是:去掉标题样式。

完整代码如下:

{
  "path": "pages/home/index",
  "style": {
    "navigationBarTitleText": "首页",
     "navigationStyle":"custom",
    "enablePullDownRefresh": false
  }
},

在首页页面中直接添加背景图片就可以了

我这边是用的image,这个图片他会默认显示到最顶部,具体的位置可以用CSS样式在微调一下,这样问题就解决啦!

目录
相关文章
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
37 2
|
1月前
|
移动开发 数据可视化 JavaScript
DIY官网可视化设计导出UNIAPP源码
DIY官网可视化设计导出UNIAPP源码
32 2
|
1月前
|
移动开发 数据可视化 小程序
高颜值可视化设计UNIAPP源码生成器
高颜值可视化设计UNIAPP源码生成器
33 1
|
1月前
|
移动开发 小程序 数据可视化
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
35 0
|
1月前
|
传感器 数据可视化 网络协议
DIY可视化整合MQTT生成UniApp源码
DIY可视化整合MQTT生成UniApp源码
43 0
|
3月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
138 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
1月前
|
JavaScript 数据安全/隐私保护
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
22 0
|
1月前
|
前端开发 JavaScript PHP
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
126 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7

热门文章

最新文章