小程序自定义配置顶部栏#yyds干货盘点# _自定义

知识的领域是无限的,我们的学习也是无限期的。这篇文章主要讲述小程序自定义配置顶部栏#yyds干货盘点#相关的知识，希望能为你提供帮助。
app.json

"window":
"navigationStyle": "custom"//自定义需要配置的内容
,

app.js

App(
onLaunch: function ()
// 获取顶部栏信息
wx.getSystemInfo(
success: res =>
//导航高度
this.globalData.navHeight = res.statusBarHeight + 46;
, fail(err)
console.log(err);

)
,
globalData:
userInfo: null,
navHeight: 0

)

index.js引用

const App = getApp(); //设立顶部栏高度
Page(
data:,
onLoad: function (options)
//自定义头部方法
this.setData(
navH: App.globalData.navHeight
);

)

【小程序自定义配置顶部栏#yyds干货盘点#】

带搜索栏
index.wxml

< !-- 自定义头部 -->
< view class=nav bg-white style=height:navHpx>
< view class=nav-title>
< view class="INinputheader">
< icon class="INsearchicon" type="search" size="12"/>
< input class="weui-input" placeholder="搜索学习内容"/>
< /view>
< /view>
< /view>

index.wxss

/* 自定义顶部栏高度 */
.nav
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;

.nav-title
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
font-family:PingFang-SC-Medium;
font-size:36rpx;
letter-spacing:2px;

.nav .back
width: 22px;
height: 22px;
position: absolute;
bottom: 0;
left: 0;
padding: 10px 15px;

.bg-white
background-color:#FFCE58;

.INinputheader
width:60%;
height:30px;
background:rgba(255,255,255,1);
border-radius:30px;
font-size: 14px;
margin-top:7px;
position: relative;
float: left;
margin-left:12px;

.INsearchicon
position: absolute;
left:12px;

.weui-input
height: 30px;
line-height: 30px;
text-align: left;
padding-left: 30px;
letter-spacing:0px;

.INtab
text-align: left;
margin-left: 12px;
color: #fff;

?
带返回箭头
html

< !-- 自定义头部栏 -->
< view class="setNav" style=height:navHpx>
< view class="tool">
< view class="goBack" bindtap="goBack"> < /view>
< view class="sets"> 订单详情< /view>
< /view>
< /view>

css

/* 自定义头部栏 */
.setNav
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
background-color: #fff;

.setNav .tool
width: 94%;
display: flex;
position: absolute;
bottom: 0;
left: 3%;

.setNav .goBack
width: 16rpx;
height: 16rpx;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(-135deg);
align-self: center;

.setNav .sets
width: 100%;
height: 90rpx;
line-height: 90rpx;
text-align: center;