微信小程序开发之-自定义导航栏

1.设计要求：（完成导航栏左边样式-达到一步返回首页等需求）

设计过程：

开发一个navbar组件

navbar.wxml:

<view class='nav-wrap' style="padding-top:{{paddingTop}}px;height:{{navHeight}}px;">
    <!-- // 导航栏 中间的标题 -->
  <view class='nav-title' style='line-height: {{navHeight + paddingTop * 2}}px;'>{{navbarData.title}}</view>
  <view>
      <!-- // 导航栏  左上角的返回按钮 和home按钮
      //  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 -->
    <view class='nav-capsule' style='margin-top: 9px;' wx:if='{{navbarData.showCapsule}}'>
       <!-- //左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示
       //从分享进入小程序时 返回上一级按钮不应该存在 -->
      <view bindtap='_navback' wx:if='{{!share}}' class='_navback'>
        <image src='../../../image/back-pre.png' mode='aspectFill' class='back-pre'></image>
      </view>
      <view class='navbar-v-line' wx:if='{{!share}}'></view>
      <view bindtap='_backhome' class='_backhome'>
        <image src='../../../image/back-home.png' mode='aspectFill' class='back-home'></image>
      </view>
    </view>
  </view>
</view>

navbar.js

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    navHeight: 0,
    paddingTop : 0,
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: true
    }
  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    //导航栏自适应
    this.setData({
      navHeight: app.globalData.navHeight,
      paddingTop: app.globalData.paddingTop
    })
  },
  methods: {
    // 返回上一页面
    _navback() {
      wx.navigateBack()
    },
    //返回到首页
    _backhome() {
      wx.redirectTo({
        url: '/pages/index/index',
      })
    }
  }

}) 

navbar.wxss

.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background:#F2F4F6;
  color: #000;
  z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
  position: absolute;
  text-align: center;
  max-width: 380rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 30rpx;
  color: #2c2b2b;
}

.nav-capsule {
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  height:30px;
  margin-left:10px;
  width: 87px;
  border: 1px solid hsla(0, 0%, 100%, .25);
  border-radius: 27px;
  background: hsla(0, 0%, 100%, .6);
  line-height: 1;
  font-size: 0;
}

.navbar-v-line {
  width: 1px;
  height: 32rpx;
  background-color: #e5e5e5;
}
._navback,
._backhome{
  padding: 0 15rpx;
}

.back-pre, .back-home {
  width: 18rpx;
  height: 31rpx;
  padding: 6.4px 0;
}
.nav-capsule .back-home {
  width: 34rpx;
  height: 34rpx;
  padding: 6.4px 0;
}
  

app.json中需将window中navigationStyle的值改为custom，即自定义：

"navigationStyle": "custom"

app.js文件中设置：

onLaunch: function (options) {
    // 获取手机系统信息
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };
    let systemInfo = wx.getSystemInfoSync();
    let reg = /ios/i;
    let pt = 20;//导航状态栏上内边距
    let h = 44;//导航状态栏高度
    if (reg.test(systemInfo.system)) {
      this.globalData.paddingTop = pt = systemInfo.statusBarHeight;
      this.globalData.navHeight = h = 44;
    } else {
      this.globalData.paddingTop = pt = systemInfo.statusBarHeight;
      this.globalData.navHeight = h = 48;
    }
}

这样设置的原因是：

1）capsule，要固定大小，须使用px单位 

2）使用height和paddingtop来设置navbar组件的高度。（pt = paddingtop； h = height）

【其中iOS：pt = 20 ， iPhone X pt = 40，h = 44】

【android ： pt = 20， h = 48】

【line-height = h + pt * 2，lineheight是因为标题也在自定义导航栏中】

 

想在哪个页面中使用此组件，例如index页面，需在此页面的index.json文件中增加一行：

"usingComponents" : {
    "navbar" : "../components/navbar/navbar"
  }

index.wxml文件中头部引入该组件，并在该组件后的第一个无定位元素设置margin-top

<navbar navbar-data='{{navbarData}}'></navbar>
<scroll-view class="scrollView" scroll-y="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun" bindscrolltolower="reachBottom" style="margin-top:{{navHeight + paddingTop}}px">

index.js中加入该组件需要的数据：

navbarData:{
            showCapsule : 0,
            title: res.data.result.setting.name,
            navHeight: app.globalData.navHeight,
            paddingTop: app.globalData.paddingTop
}