通过设置navigationStyle, 即自定义导航实现背景全屏

参考文章:  微信小程序 自定义头部导航栏 navigationStyle

代码部分

在page.json中, 加入 "navigationStyle": "custom" , 这是全局的, 单页面的还不知道怎么搞


"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "知识问答系统",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle": "custom"
}

  

然后背景全屏代码部分, 首先需要容器占满屏幕

<view class="background" :style = ' { backgroundImage : " url(" + setting.login_background + " ) " } '>

  

 		onReady() {
let systemInfo = uni.getSystemInfoSync()
this.height = systemInfo.windowHeight },

  

uniapp 小程序全屏的实现的更多相关文章

  1. 微信小程序 - 骨架屏

    骨架屏 - “与其等待网络加载,不如提前给点暗示” 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示

  2. delphi 程序全屏显示无标题栏,覆盖整个屏幕

    delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,所以记下 procedure TMainFrm.FormCreate(Sender: TObject); begin w ...

  3. [WPF]程序全屏

    原文:[WPF]程序全屏 代码: 使用:

  4. delphi程序全屏显示无标题栏覆盖整个屏幕

    delphi 简单实现程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,具体代码如下,感兴趣的朋友可以参考下哈 delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时 ...

  5. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  6. uniapp小程序迁移到TS

    uniapp小程序迁移到TS 我一直在做的小程序就是 山科小站 也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能 ...

  7. uniapp小程序webSocket封装使用

    目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...

  8. 拥抱小程序,WeTest小程序全链路测试解决方案正式上线

    背景 随着微信开放小程序开发功能,迅速在各个实体店抢占流量入口,广大商家看到了在线和离线的机会整合,利用小程序版本特点低成本进入市场,达到流量的获取和转化. 伴随着资本的进入,小程序开发市场也因此越来 ...

  9. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

随机推荐

  1. 基于Spring MVC + Spring + MyBatis的【图书信息管理系统(二)】

    资源下载:https://download.csdn.net/download/weixin_44893902/35123371 练习点设计:添加.删除.修改 一.语言和环境 实现语言:JAVA语言. ...

  2. Java初学者作业——分别计算两个整数加、减、乘、除的结果并显示,要求除法保留两位小数。

    返回本章节 返回作业目录 需求说明: 分别计算两个整数加.减.乘.除的结果并显示,要求除法保留两位小数. 实现思路: 接收用户控制台输入的两个整数. 实现两个整数的加.减.乘.除的运算并输出结果. 除 ...

  3. Asp.Net Core 使用Monaco Editor 实现代码编辑器

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...

  4. MySQL8.0.20安装详解

    https://blog.csdn.net/yeb112233/article/details/106042867/ alter user root@localhost identified by ' ...

  5. postgresql使用pg_dump工具进行数据库迁移

    一.使用管理员身份打开cmd,切换到postgresqlp安装目录下的bin目录 必须要以管理员身份打开cmd,否则报拒绝访问 二.把生成的文件上传到服务器上,同样cd 到postgresql的安装b ...

  6. CAP原理详解

    转载 https://blog.csdn.net/u013332124/article/details/82874178 文章目录 一.CAP原理介绍 对CAP原理的一些常见的理解误区 二.CAP原理 ...

  7. 基于CentOS6.5-Hadoop2.7.3-hive-2.1.1安装sqoop1.4.7

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6627736198431375879/ 系统版本,Hadoop已安装完成.链接<CentOS6.5下安装Had ...

  8. 2022年form表单中input控件最详细总结

    语法 <input type="" name="" id="" value="" placeholder=&quo ...

  9. 学习Flutter从0开始

    一. 认识Flutter 1.1. 什么是Flutter 先看看官方的解释: Flutter is Google's UI toolkit for building beautiful, native ...

  10. 【Java】IntelliJ IDEA 快捷键

    IntelliJ IDEA 快捷键 1. Editing(编辑) 快捷键 介绍 Ctrl +Space 基本代码补全,输入字母按后列出匹配的词组 Ctrl+Shift+Space 智能代码补全,列出与 ...