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

效果图

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…

前端面试(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…

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 首先进入原先编译…

Event事件的整理

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

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

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

【已解决】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…

前端设计模式之旅:命令模式

引言 使用命令模式&#xff0c;我们可以将执行特定任务的对象与调用该方法的对象解耦。 核心思想 命令模式的核心思想是将请求封装成一个对象&#xff0c;从而使请求的发起者和请求的执行者解耦。 请求的发起者只需要知道如何创建命令对象并将其传递给请求者&#xff0c;而不需…

极坐标下的牛拉法潮流计算57节点MATLAB程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 潮流计算&#xff1a; 潮流计算是根据给定的电网结构、参数和发电机、负荷等元件的运行条件&#xff0c;确定电力系统各部分稳态运行状态参数的计算。通常给定的运行条件有系统中各电源和负荷点的功率、枢纽…

贪心算法:买卖股票的最佳时机II 跳跃游戏 跳跃游戏II

122.买卖股票的最佳时机II 思路&#xff1a; 想要获得利润&#xff0c;至少要以两天为一个交易单元&#xff0c;因为两天才会有股价差。因此可以将最终利润进行分解&#xff0c;如prices[3] - prices[0] (prices[3] - prices[2]) (prices[2] - prices[1]) (prices[1] - pr…

【Mars3d-ModelEntity】实现gltf模型不随地图缩放而改变大小

需求场景&#xff1a; 1.实现gltf模型不随地图缩放而改变大小 相关代码&#xff1a; const graphic new mars3d.graphic.ModelEntity({ name: "警车", position: [116.346929, 30.861947, 401.34], style: { url: "//data.mars3d.cn/gltf/mars/jingche/jingc…

python界面开发,使用wxpython库

入门学习Python时&#xff0c;使从接触一个项目开始&#xff0c;当时需要我开发一个界面&#xff0c;当时综合考量之后&#xff0c;最终选择了今天要分享的内容部分&#xff0c;也就是使用Python来开发&#xff0c;主要使用到的是Python库——wxPython库来进行界面开发&#xf…

论文阅读:Lidar Annotation Is All You Need

目录 概要 Motivation 整体架构流程 技术细节 小结 概要 论文重点在探讨利用点云的地面分割任务作为标注&#xff0c;直接训练Camera的精细2D分割。在以往的地面分割任务中&#xff0c;利用Lidar来做地面分割是目前采用激光雷达方案进行自动驾驶的常见手段。来自Evocargo …

phpstudy是什么?

PHPStudy 是一个集成环境工具&#xff0c;它将 PHP 开发所需的软件&#xff0c;如 Apache&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库服务器&#xff09;、PHP&#xff08;脚本语言&#xff09;等打包在一起&#xff0c;以便用户能够轻松安装和配置这些软件&a…