ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序--自定义navBar

2022-05-23 15:33:00  阅读:141  来源: 互联网

标签:index 自定义 -- 微信 top height padding navbar action


android平台的微信小程序NavigationBarTItle题目居左,苹果的居中,微信官方文档没有navBar的相关设置,只能自行定义。

第一步:在page.json页面的首页路由中加入"navigationStyle": "custom",取消默认的原生导航栏

 

 

 第二步:新建navBar组件

 

 具体代码:

index.vue

<template>
    <view class="navbar custom-class" :style="{height:globalData.navHeight + 'px'}">
      <view class="navbar-action-wrap navbar-action-group row item-center" :style="{top:globalData.navTop + 'px'}" style="background-color:rgba(255,255,255,0.6)">
          <view class="navbar-action_item" @click="_navBack">返回</view>
          <view class="navbar-action_item last" @click="_toIndex">首页</view>
      </view>
      <view class='navbar-title' :style="{top:globalData.navTop + 'px'}">
        {{pageName}}
      </view>
    </view>
</template>

<script>
      export default{
          props: {
              pageName:String,
              showNav:{
                type:Boolean,
                value:true
              },
              showHome: {
                type: Boolean,
                value: true
              }
         },
          data(){
              return {
                  navTop: '',
                  num:20, //字体大小
                  fontColor:'red' ,//字体颜色
                  globalData:{
                      navHeight: null,
                      navTop: null,
                      windowHeight: null
                  }
              }
          },
          onShow() {
             
           },
          methods: {
              // 获取高度
              getHeight(){
                  let menuButtonObject = wx.getMenuButtonBoundingClientRect();  // 获取胶囊按钮的信息
                  uni.getSystemInfo({
                    success: res => {
                      let statusBarHeight = res.statusBarHeight,    // 设备高度(电量,时间...显示的位置)
                        navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
                        navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
                      this.globalData.navHeight = navHeight;
                      this.globalData.navTop = navTop;
                      this.globalData.windowHeight = res.windowHeight;
                    },
                    fail(err) {
                      console.log(err);
                    }
                  })
              },
              //回退
              _navBack: function () {
                  uni.navigateBack({
                    delta: 1
                  })      
              },
              //回主页
              _toIndex: function () {
                uni.switchTab({
                    url: '/pages/index/index'
                })
              },
            }
      }
</script>

<style>
    @import url("./css/navbar.css");
    
</style>

navbar.css

.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
}

.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-action-wrap {
  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-top: 4px;
  padding-bottom: 4px;
}

.navbar-action-group {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
}

.navbar-action_item {
    width: 20rpx;
    height: 20rpx;
  padding: 3px 0;
  color: #333;
}

.navbar-action-group .navbar-action_item {
  border-right: 1px solid #f0f0f0;
  padding: 3px 14px;
}

.navbar-action-group .last {
  border-right: none;
}

相关计算:

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

 

 

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

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

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

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

关于第1步中,为啥要乘以2的原因,请看灵魂画手般的我画的图纸:

 

 

 第三步:引入组件

在建立好的首页页面引入navbar组件

 

 

<template>
    <view class="container">
        <navbar :pageName="nbTitle" ref="navBarRef"></navbar>
    </view>
</template>
<script>
    import navbar from '../../components/navbar/index.vue'
    export default {
        components: {
        navbar
        },
            data() {
        return {
                    nbTitle: '首页'
                }
            },
            onShow() {
        this.$refs.navBarRef.getHeight()
        },
        }
                

展示:

 

 例如:

 

 

 

 

参考:https://www.cnblogs.com/sese/p/9761713.html

标签:index,自定义,--,微信,top,height,padding,navbar,action
来源: https://www.cnblogs.com/wq805/p/16301363.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有