微信小程序 自定义导航栏

Posted 怂的一批的蜗牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 自定义导航栏相关的知识,希望对你有一定的参考价值。

看着原博文https://www.cnblogs.com/sese/p/9761713.html简单的练习。

1.在app.json中     window配置navigationStyle

 

 

 2.计算相关值

 

 

 

1. 整个导航栏的高度;

2. 胶囊按钮与顶部的距离;

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息

 

通过这些信息我们可以计算出上面说的3个值:

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;

2. 胶囊按钮与顶部的距离 = top;

3.胶囊按钮与右侧的距离 = windowWidth - right。

App.js 代码如下:

3.头部组件navBar

 

 

 navBar.wxml

<view class="navbar" style="height:{{navHeight}}px;">

  <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 -->
  <view class="navbar_left" style="top:{{navTop}}px;" wx:if="{{showNav}}">

    <!-- 控制返回按钮的显示 -->
    <view bindtap="navBack"><image src="/image/back.png"></image></view>

    <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏-->
    <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"><image src="/image/home.png"></image></view>
  </view>

  <!-- 中间标题 -->
  <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view>

</view>

 

navBar.wxss

.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
  background: #fff;
}
.navbar_left{
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 10px;
  z-index: 11;
  line-height: 1;
  padding: 3px;
  border:1rpx solid #f0f0f0;
  border-radius: 40rpx;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.navbar_left view{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
.navbar_left view image{
  width: 100%;
  height: 100%;
}
.nav_line{
  border-left: 1rpx solid #f0f0f0;
  padding-left: 8px; 
}
.navbar_title{
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

 

navBar.js

const App = getApp();
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    pageName: String,  //中间的title
    showNav: {         //判断是否显示左上角的按钮    
      type: Boolean,    
      value: true
    },
    showHome: {         //判断是否显示左上角的home按钮
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showNav: true,     //判断是否显示左上角的home按钮
    showHome: true,     //判断是否显示左上角的按钮
  },
  lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //回退
    navBack: function () {
      wx.navigateBack()
    },
    //回主页
    navHome: function () {
      wx.navigateTo({
        url: \'/pages/home/home\'
      })
    },
  }
})

 

navBar.json

 

4.index中

index.json

 index.wxml

<view class="view-page">
  <navbar page-name="你当前页面的名字" show-nav="{{showNav}}" show-home="{{showHome}}"></navbar>
  <view class=\'page-content\'>
    <!--这里放你的内容-->
    <navigator url="../demo1/demo1">跳转</navigator>
  </view>
</view>

index.js

 

 5.demo1中

demo1.wxml

 

 demo.js

 

 6.home页

home.wxml

 

home.js

 最后效果图:

 

 

以上是关于微信小程序 自定义导航栏的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序自定义导航栏兼容适配所有机型

小程序自定义底部导航缓存

小程序自定义导航栏仿原生固定在顶部

微信小程序自适应性的自定义导航栏开发

微信小程序自定义navigationBar

微信小程序 自定义导航栏