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

Posted 2021-12-30 橘子皮放久了的陈

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
    );
  
)

带搜索栏

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;

js

// 返回上个页面
goBack() 
    wx.navigateBack(
        delta: 1,
    )
,