Skip to content

webpig/custom-navbar

Repository files navigation

使用方法

1、安装npm包:

npm install --save custom-navbar

2、引入组件:

在页面的json文件加入如下配置:

{
  "usingComponents": {
    "custom-navbar": "custom-navbar"
  },
  "navigationStyle": "custom"
}

3、在微信开发工具上构建npm,并且本地设置勾选 使用npm模块,如图所示:

构建npm演示 勾选使用npm模块演示

4、简单示例测试

在wxml上加入:

<custom-navbar title="首页"></custom-navbar>

效果如下:

navbar简单示例

至此,组件接入完成。

注意:这里的导航栏是使用了fixed定位的,如果我们要保持原来的布局,可以设置页面容器的 padding-top,比如有如下结构:

<custom-navbar
  title="首页"
  bindback="back"
  showLeftBtn="{{true}}"
  backgroundColor="red"
  fontColor="#fff">
</custom-navbar>
<view class="container">
  // 子元素
</view>

我们可以计算出导航栏的高度,然后设置padding-top:

// utils.js
const HEIGHT_OF_IOS_STATUS_BAR = 44
const HEIGHT_OF_ANDROID_STATUS_BAR = 48

const getNavBarHeightAndStatusBarHeight = () => {
  let obj = {
    statusBarHeight: 0,
    navBarHeight: 0
  }

  wx.getSystemInfo({
    success: ({statusBarHeight, system}) => {
      obj.statusBarHeight = statusBarHeight,
      obj.navBarHeight = system.indexOf('iOS') > -1
        ? HEIGHT_OF_IOS_STATUS_BAR 
        : HEIGHT_OF_ANDROID_STATUS_BAR
    }
  })

  return obj
}

// index.js
getNavBarHeightAndStatusBarHeight () {
  const { statusBarHeight, navBarHeight } = util.getNavBarHeightAndStatusBarHeight()
  this.setData({
    statusBarHeight,
    navBarHeight
  })
}
  
// index.wxml
<view class="container" style="padding-top:{{statusBarHeight + navBarHeight}}px"></view>

组件属性

属性名 类型 默认值 说明
mode string 'default' 有三种模式:'default', 'menu-btn', 'custom'
menuBtnBgColor string '#fff' menu-btn背景颜色
title string 标题
titleSize string '17px' 标题大小,可自定义,带单位,rpx和px都可以
showLeftBtn boolean true 是否显示左边按钮,即返回键
leftBtnText string 左边按钮文本,即返回箭头右边文字
leftBtnWidth string '30px' 左边按钮区域大小,可自定义点击区域大小
backgroundColor string '#fff' 导航栏背景颜色
fontColor string '#000 字体颜色
bindback eventhandle 左边按钮点击事件

mode

mode为 default 时,即常规的导航栏,返回键+标题,返回键可以隐藏,只显示标题。

示例代码:

<!--index.wxml-->
<custom-navbar title="首页" bindback="back" showLeftBtn="{{false}}"></custom-navbar>

//index.js
back() {
  console.log('back')
}

注意,我们这里返回隐藏键的写法:showLeftBtn="{{false}}" ,直接这样写是不行的:showLeftBtn="false",因为这样会当作字符串处理。

设置字体颜色和背景颜色:

<custom-navbar
  title="首页"
  bindback="back"
  showLeftBtn="{{true}}"
  backgroundColor="red"
  fontColor="#fff">
</custom-navbar>

mode为 menu-btn 时,左边显示为和右边一样的胶囊样式,可以自定义胶囊里面的图标以及事件。

<custom-navbar mode="menu-btn"></custom-navbar>

添加图标,这里可以添加两个图标:

<custom-navbar mode="menu-btn">
  <icon type="clear" size="20" slot="menu-btn-left" />
  <icon type="search" size="20" slot="menu-btn-right" />
</custom-navbar>

左右图标的设置只要设置 slot 属性就可以了,左边:slot="menu-btn-left",右边:slot="menu-btn-right" 。可以自己添加事件。这里的元素自定义,图标和图片的尺寸推荐 20px

mode为 custom 时,左边的按钮可以自定义:

<custom-navbar mode="custom">
  <view style="font-size:32px">+</view>
</custom-navbar>

自定义标题(1.0.6版本新增功能)

我们可以在标签上添加 slot="title" 来自定义标题栏:

<comp
  bindback="back"
  mode="menu-btn">
  <image src="http://pic.616pic.com/ys_bnew_img/00/04/17/3Sd12m4wcQ.jpg" slot="menu-btn-left" style="width:20px;height:20px"></image>
  <image src="http://pic.616pic.com/ys_bnew_img/00/04/17/3Sd12m4wcQ.jpg" slot="menu-btn-right" style="width:20px;height:20px"></image>
  <input type="text" slot="title" style="width:220rpx;height:60rpx;border-radius:30rpx;background:#f8f8f8;font-size:28rpx;padding-left:30rpx" placeholder="请输入关键字"/>
</comp>

我们在添加自定义标题的时候就不用设置title属性了

自定义 menu-btn 背景颜色(1.1.0版本新增功能)

通过 menuBtnBgColor 属性可自定义左边按钮背景色。

本组件持续更新,欢迎大家提建议,帮助优化和改进!谢谢

About

微信小程序自定义导航栏

Resources

License

Stars

Watchers

Forks

Packages

No packages published