微信小程序置顶导航,替代原生导航栏

效果图

image.png

思路:Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏,wx.getSystemInfoSync获取可使用窗口高度

wxml代码:

<!-- 头部 -->
<view class="header" style="padding-top:{{statusBarHeight}}px">
<view class="searchbtn">
<image src="/pages/asset/img/search_03.jpg" class="search_pic"></image>
<view class="search_word"> 哪吒之魔童降世</view>
</view>
<view class="history"><image src="/pages/asset/img/time_05.jpg"></image></view>
</view>
<!-- 头部 -->

wxss代码:

.header{ width: 100%; height: 58rpx; position: fixed; left: 0rpx; top: 0%; background: #fff; z-index: 111}
.searchbtn{ width: 50%; height: 58rpx; margin-top:2%; float: left;  margin-left:30rpx; border-radius: 45rpx; background: #f5f5f5;}
.search_pic{ display: block; width: 34rpx; height: 34rpx; float: left;margin-top: 3%; margin-left: 18%; }
.search_word{ font-size: 24rpx; float: left; color: #bbbbbb;font-family: '微软雅黑'; line-height: 58rpx; text-align: left; margin-left: 8rpx;}
.history{ display: block; width: 34rpx; height: 34rpx; float: left; margin-top:3.5%; margin-left:30rpx;}
.history image{ width: 34rpx; height: 34rpx;}

app.json修改window下navigationStyle 为 custom

"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "影视",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},

最后,wx.getSystemInfoSync获取可使用窗口高度,app.js下,加上以下代码

//app.js
App({
globalData: {
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
},

页面js文件添加到data:

Page({
data: {
statusBarHeight: app.globalData.statusBarHeight,}
})

微信小程序置顶导航,替代原生导航栏-遇见你与你分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【docker】部署minio对象存储并用rclone同步

docker部署minio对象存储并用rclone同步 本文首发于 ❄️慕雪的寒舍 1.什么是minio&#xff1f; minio是一个开源的对象存储服务器&#xff0c;兼容S3协议。 官网&#xff1a;https://min.io/ 官方在开源的基础上也提供云端S3服务&#xff0c;分为个人和企业&#xff0c;有不…

【MySQL】图形化界面工具 DataGrip

使用 dataGrip: 1.添加数据源 2.连接本地数据库 user 是 root 密码是 123456 3.展示所有数据库 4.创建数据库 5.创建表 6.修改表 在需要修改的表上&#xff0c;右键选择 "Modify Table..." 如果想增加字段&#xff0c;直接点击号&#xff0c;录入字段信息&#x…

Ansible Galaxy?Ansible如何控制任务的并行执行?Ansible故障后的排查思路?

Ansible Galaxy是一个由各种Ansible管理员和用户编写的Ansible角色的公共库。它是一个包含数千个Ansible角色的归档文件&#xff0c;并且有一个可搜索的数据库&#xff0c;帮助Ansible用户识别可能帮助他们完成管理任务的角色。Ansible Galaxy包括指向新用户和角色开发人员的文…

前端面试(5)

1、移动端适配 1.1、设置meta缩放比例&#xff0c;将设备窗口调整为设计图大小。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-sc…

MetaAI发布Seamless:两秒内实现跨语言同声传译

在当今日益互联的世界中&#xff0c;语言差异常常成为沟通的障碍。MetaAI最新发布的语音翻译大模型Seamless&#xff0c;正是为打破这一障碍而生。Seamless不仅提供流畅、高效的多语言翻译功能&#xff0c;更在保留说话人韵律和风格方面取得突破&#xff0c;是AI同声传译领域的…

MX6ULL学习笔记(十三)Linux 自带按键驱动程序

一、Linux 内核自带按键驱动使能。 Linux 内核也自带了 KEY 驱动&#xff0c;如果要使用内核自带的 KEY 驱动的话需要配置 Linux 内核&#xff0c;不过 Linux 内核一般默认已经使能了 KEY 驱动&#xff0c;但是我们还是要检查一下。 使用如下命令打开 Linux 配置菜单&#xff…

mysql8升级测试

参考文档&#xff1a;https://mysql.net.cn/doc/refman/8.0/en/mysql-upgrade.html mysql5.7包&#xff1a; mysql-5.7.25-linux-glibc2.12-x86_64 <<<glibc2.12 mysql8包&#xff1a; mysql-8.0.35-linux-glibc2.28-x86_64.tar.xz <<< glibc2.2…

docker入门小结

docker是什么&#xff1f;它有什么优势&#xff1f; 快速获取开箱即用的程序 docker使得所有的应用传输就像我们日常通过聊天工具文件传输一样&#xff0c;发送方将程序传输到超级码头而接收方也只需通过超级码头进行获取即可&#xff0c;就像一只鲸鱼拖着货物来回运输一样。…

前端API请求缓存的5种方案

文章目录 一、前言二、[方案一]数据缓存三、[方案二]单promise 缓存四、[方案三]多promise 缓存五、[方案四]添加时间有关的缓存六、[方案五]基于修饰器的方案四七、最后 一、前言 开发 web 应用程序时&#xff0c;性能都是必不可少的话题。 对于webpack打包的单页面应用程序…

win中查看MD5、Linux中查看MD5

win中的MD5计算 1、用GitBash Git Bash Here md5sum.exe 我记得-孙燕姿.mp32、win自带命令 certutil -hashfile 我记得-孙燕姿.mp3 MD5Linux中MD5计算 md5sum 我记得-孙燕姿.mp3

离线编译安装opencv库及多版本切换[ubuntu]

系统版本&#xff1a;ubuntu18.04 库版本&#xff1a;opencv4.6.0 & opencv3.6.0 一、多版本安装前准备 1. 卸载已经安装的opencv版本[可选] 1.1 卸载从软件仓库中安装的opencv sudo apt-get purge libopencv* 1.2 卸载使用source自行编译安装的opencv 首先进入原先编译…

你好,C++(3)2.1 一个C++程序的自白

第2部分 与C第一次亲密接触 在浏览了C“三分天下”的世界版图之后&#xff0c;便对C有了基本的了解&#xff0c;算是一只脚跨入了C世界的大门。那么&#xff0c;怎样将我们的另外一只脚也跨入C世界的大门呢&#xff1f;是该即刻开始编写C程序&#xff1f;还是…… 正在我们犹…

springboot(ssm疗养院管理系统 养老院管理平台Java系统

springboot(ssm疗养院管理系统 养老院管理平台Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…

Event事件的整理

很久没去看thinkphp框架文档&#xff0c;结果看到有更新到8.0版本。 好奇去下载框架运行&#xff0c; 好在我电脑都有运行的PHP版本是8.1多&#xff0c;拿捏这个新出的think 今天摸索event的这个事件功能&#xff0c; 文档的介绍是这样&#xff1a; (省略几十字)&#xff0…

[实践总结] 典型的串行任务局部并行化处理案例:多任务并发获取航班信息

假设你有一个APP&#xff0c;主要用于查询航班信息&#xff0c;你的APP是没有这些实时数据的&#xff0c;当用户发起查询请求时&#xff0c;你需要到各大航空公司的接口获取信息&#xff0c;最后统一整理加工返回到APP客户端。当然JDK自带了很多高级工具&#xff0c;比如CountD…

【Qt】报错error:undefined reference to `vtable for Consumer‘的解决方法

1. 问题原因 在创建完程序后&#xff0c;点击构建&#xff0c;显示编译错误。 错误问题如下: error: undefined reference to vtable在编译输出中查看显示如下&#xff1a; error:undefined reference to vtable for custom2. 原因分析 这个错误通常是因为 C 的虚函数表&am…

《面向机器学习的数据标注规程》摘录

说明&#xff1a;本文使用的标准是2019年的团体标准&#xff0c;最新的国家标准已在2023年发布。 3 术语和定义 3.2 标签 label 标识数据的特征、类别和属性等。 3.4 数据标注员 data labeler 对待标注数据进行整理、纠错、标记和批注等操作的工作人员。 【批注】按照定义…

Java中的网络通信协议与通信模型分析

一、引言 网络通信在现代社会中扮演着重要的角色&#xff0c;而Java作为一种广泛应用于网络编程的编程语言&#xff0c;其网络通信协议与通信模型的分析显得尤为重要。本文将分析Java中常用的网络通信协议和通信模型&#xff0c;探讨其特点和应用场景。 二、网络通信协议 1. …

【已解决】ModuleNotFoundError: No module named ‘tensorflow‘

问题描述 Traceback (most recent call last): File "dataset_tool.py", line 16, in <module> import tensorflow as tf ModuleNotFoundError: No module named tensorflow 如果直接pip install tensorflow&#xff0c;还会报错 解决办法 方法一 pip i…

redis未授权漏洞复现

什么是redis redis就是个数据库&#xff0c;跟mysql不同的地方在于redis主要将数据存在内存中&#xff0c;读写速度非常快 redis未授权 其原因很简单&#xff0c;就是redis服务器在默认安装好不配置的情况下可以直接免密码登录&#xff0c;登录后在web目录写入一句话木马&am…