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

效果图

思路: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,
  }
})

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

相关推荐
zluz_3 小时前
微信小程序,组件中使用全局样式
微信小程序·小程序
明月(Alioo)5 小时前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
aiguangyuan7 小时前
微信小程序中的双线程模型及数据传输优化
微信小程序·前端开发
说私域10 小时前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
笨笨狗吞噬者10 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
sheji341611 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序
小小前端_我自坚强11 小时前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范
右子16 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
江城开朗的豌豆19 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆19 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序