1.Component--自定义导航栏

1.使用自定义导航栏 注意点

1.以下内容

1.1.Component里的Boolean类型的Property取值异常 始终为true,需更改成使用String类型（bug出现日期2018-11-20）
1.2.自定义导航栏 使用系统自带下拉刷新方法界面错误.需要使用scrollView 处理下拉上拉事件的监听

2.细节处

2.1 需要判定有关 安卓、iphone、iPhone X导航栏高度的不同

---

2.截图

自定义导航栏截图.png

---

3.代码

3.1获取手机 导航栏高度数据

app.js

//app.js
App({
onLaunch:  function  ()  {
  const vm =  this
  wx.getSystemInfo({
    success:  function  (res)  {
    // 1.导航栏高度
     // 1.1 安卓
      let totalTopHeight =  68
      if  (res.model.indexOf('iPhone X')  !==  -1)  {
          // 1.2\. iPhoneX 高度
          totalTopHeight =  88
      }  else  if  (res.model.indexOf('iPhone')  !==  -1)  {
        // 1.3 非iphoneX的 iphone 高度
          totalTopHeight =  64
      }
      //状态栏 高度
      vm.globalData.statusBarHeight = res.statusBarHeight
      vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
      vm.globalData.navHeight = totalTopHeight;
    },

    failure(res)  {
      vm.globalData.statusBarHeight =  0
      vm.globalData.titleBarHeight =  0
    }
  })
},

  globalData:  {
    userInfo:  null,
    navHeight:  0,
    statusBarHeight:  0,
    titleBarHeight:  0
    }
})

---

3.2 引用 自定义导航栏

index.json

{
  "usingComponents":  {
    "customNav":  "/components/customNav/customNav"
  }
}

---

index.wxml

<view  class='view-page'>
  <customNav  pageName="我是弄死谁看你否否你南斯拉夫"  showHome="true"></customNav>
  <view  class='page-content'  style='height:calc(100vh - {{navH}}px)'>
    <!--这里放你的内容-->
  </view>
</view>

---

3.3 customNav

customNav.js

// components/navbar/index.js
const  App  = getApp();
Component({
options:  {
  multipleSlots:  true  // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties:  {
  // 1.标题 抿成
  pageName:  String,
  showNav:  {
    type:  Boolean,
    value:  true
  },
  // 2.是否 显示首页按钮，切记 使用 String，
  // 使用Boolean判定在 component中始终未true
  showHome:  {
    type:  String,
    value:  "false"
   }
},
/**
* 组件的初始数据
*/
data:  {

},

lifetimes:  {
  attached:  function  ()  {
    // 在组件实例进入页面节点树时执行
    // 切记 wxml 赋值单位为 px
    this.setData({
      navH:  App.globalData.navHeight,
      titleBarH:  App.globalData.titleBarHeight
    })
},

  detached:  function  ()  {
    // 在组件实例被从页面节点树移除时执行
  }
},

/**
* 组件的方法列表
*/
methods:  {
  //1\. 回退
  navBack:  function  ()  {
    console.log("点击 返回")
    console.log(App.globalData.navHeight)
    wx.navigateBack({
      delta:  1
  })
},

  //2.回主页
  toIndex:  function  ()  {
    console.log("点击 首页")
      // wx.navigateTo({
      // // 以下为 首页 路径
      // // url: '/pages/home/home'
      // })
    },
  }
})

---

customNav.json

{
"component":  true
}

---

customNav.wxml

<!-- 1.注意此处 使用px 不要使用 rpx -->

<view  class="customNavBar"  style='height:{{navH}}px'>
<!-- 1.1 标题 -->
<view  class='navBar_title'>
<view  class='navBar_detailTitle'  style='height:{{titleBarH}}px ;line-height:{{titleBarH}}px'>{{pageName}}</view>

<!-- 1.2 返回 首页 按钮 在需要的地方 将View 替换成 image 即可-->
<view  class="navBar_leftView {{showHome ? 'navBar_leftView_group' : ''}} row item-center"  wx:if="{{showNav}}">

<block  wx:if="{{showHome=='true'}}">
<view  class='backView'  style='color:orange'  bindtap="navBack">返</view>
<view  class='homeView'  style='color:red'  bindtap="toIndex">首</view>
</block>

<block  wx:else>
<view  class='back'  style='color:orange'  bindtap="navBack"></view>
</block>

</view>

<!-- 1.2 返回 首页 按钮 结束-->

</view>

</view>

---

customNav.wxss

/* components/navbar/index.wxss */

/* 1.导航栏 */

.customNavBar  {
width:  100%;
overflow:  hidden;
position:  relative;
top:  0;
left:  0;
z-index:  10;
background-color:orange;
}

/* 1.1 导航栏标题 */

.navBar_title  {
width:  100%;
position:  absolute;
bottom:  0;
left:  0;
z-index:  10;
/* background-color: red; */
color: #333;
}

/* 使用2层 view 处理 原因：尽量避免标题文字 过多 导致 文字超出 左右侧 按钮所在位置 */

.navBar_detailTitle  {
margin-left:  25%;
width:  50%;
background-color:  gray;
font-size:  30rpx;
font-weight:  bolder;
text-align:  center;
/* 单行 省略点 显示 */
overflow:  hidden;
text-overflow:  ellipsis;
display:  -webkit-box;
-webkit-line-clamp:  1;
-webkit-box-orient:  vertical;
word-break:  break-all;
}

/* 1.1 导航栏标题 结束*/

/* 1.2 返回键 与 首页键 */

.navBar_leftView  {
position:  absolute;
left:  10px;
bottom:  7px;
z-index:  11;
line-height:  1;
padding:3px  0;
display:  flex;
flex:  row;
}

.navBar_leftView_group  {
border:  1px  solid #e8e8e8;
border-radius:  20px;
overflow:  hidden;
/* background-color: blue; */
}

.backView  ,  .homeView  {
width:  60rpx;
height:  60rpx;
background-color:  green;
font-size:  30rpx;
text-align:  center;
line-height:  60rpx;
}

.homeView{
margin-left:  5rpx;

}