小程序 自定义单页面头部导航栏（标题栏）

写在前：自定义头部标题栏，并封装引用到需要的页面。

---

实现单页面可用自定义头部（未封装）

首先：根据小程序文档 顶配置项  在需要自定义的页面的json文件中添加下面的配置

{
  "navigationStyle": "custom"
}

其次：为适配各手机顶部状态栏高度高度不同，动态获取高度并存放在全局变量中（放到app.js中）

App({
  onLaunch: function() {

  },
  globalData: {
    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
  }
})

之后：布局，（注：因为浮动的元素不占位置，所以用空标签来占位置，当然也可以清除浮动的元素带来的影响） 

<view class="topbar" style="padding-top:{{statusBarHeight}}px">
  <view class="arrow-box row">
    <image src="../image/mine_back.png"></image>
  </view>
  <view class="input-box row">
    <input placeholder="请输入你想找的内容" />
  </view>
</view>
<view class="top-comend" style="padding-top:{{statusBarHeight}}px"></view>
<view>这是测试</view>

之后：样式（注：因为设置的是px，效果不是很完美，需自调）

.topbar {
  width: 100%;
  height: 45px;
  /* background-color: pink; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-box {
  width: 10%;
  height: 100%;
  /* background-color: #fe6969; */
  float: left;
}

.arrow-box image {
  width: 14px;
  height: 16px;
  transform: rotateY(180deg);
}

.input-box {
  width: 52%;
  height: 100%;
  /* background-color: #eee; */
  justify-content: center;
  align-items: center;
  float: left;
  margin-left: 3%;
}

.input-box input {
  font-size: 12px;
  color: #333;
  width: 93%;
  height: 30px;
  background-color: #f2f2f2;
  border-radius: 44rpx;
  padding-left: 7%;
}

.top-comend {
  width: 100%;
  height: 45px;
}

最后：因为头部状态栏高度是动态获取的，所以需要单页面引用全局变量

const app = getApp()
Page({
  data: {
    statusBarHeight: app.globalData.statusBarHeight
  },
	/**
	 * 生命周期函数--监听页面加载
	 */
  onLoad: function () {
    // console.log(app.globalData.statusBarHeight);
  },
})

以上是单页面内单独写，以下写成一个自定义组件，各需要的单页面可引用

---

根据 小程序自定义组件 封装，自定义组件引用

示意图：背景图通栏

---

 

首先，我们新建四个文件， my-component.js、my-component.json、my-component.wxml、my-component.wxss,

放到文件夹components里，

之后，my-component.wxml：布局

<!-- 这是自定义组件的内部WXML结构 -->
<view class="topbar" style="padding-top:{{statusBarHeight}}px">
  <view class="arrow-box row">
    <image src="../image/mine_back.png"></image>
  </view>
  <view class="input-box row">
    <input placeholder="请输入你想找的内容" />
  </view>
</view>
<!-- <view class="top-comend" style="padding-top:{{statusBarHeight}}px"></view> -->

之后：my-component.wxss：样式

.topbar {
  width: 100%;
  height: 45px;
  /* background-color: pink; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-box {
  width: 10%;
  height: 100%;
  /* background-color: #fe6969; */
  float: left;
}

.arrow-box image {
  width: 14px;
  height: 16px;
  transform: rotateY(180deg);
}

.input-box {
  width: 52%;
  height: 100%;
  /* background-color: #eee; */
  justify-content: center;
  align-items: center;
  float: left;
  margin-left: 3%;
}

.input-box input {
  font-size: 12px;
  color: #333;
  width: 90%;
  height: 30px;
  background-color: #f2f2f2;
  border-radius: 44rpx;
  padding-left: 7%;
  padding-right: 3%;
}

.top-comend {
  width: 100%;
  height: 45px;
}

之后：在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

const app = getApp()
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

之后：声明这是组件   自定义组件

{
  "component": true
}

以上都是自定义组件各页面，以下是对组件的调用

---

当前，（我的页面时index.wxml）布局页面调用

<view>
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>
<view class="ceshi"></view>

当前，（我的页面index.wxss）样式页面编写

page {
  width: 100%;
  height: 100%;
}
.ceshi {
   width: 100%;
  height: 100%;
  background-image: url(http://img2.imgtn.bdimg.com/it/u=514294704,4187138556&fm=15&gp=0.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

当前，（我的页面index.json）配置页面  （注："/components/my-component" 路径是我的页面路径配置，与index同级）

{
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "component-tag-name": "/components/my-component"
  }
}

当前，（我的页面index.js）,因为没有组件通讯（现阶段）,所以省略此页面

基本实现自定义页面，后期会继续记录，以免自己忘记