【Taro开发】-自定义导航栏NavBar（五）

-雾里-

已于 2022-04-22 10:11:45 修改

阅读量4.4k

点赞数 1

分类专栏： Taro微信小程序开发文章标签： javascript 前端

于 2022-03-23 15:36:36 首次发布

本文链接：https://blog.csdn.net/weixin_46025371/article/details/123687491

版权

Taro微信小程序开发专栏收录该内容

15 篇文章 24 订阅

订阅专栏

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui
Taro-ui：基于 Taro 开发 UI 组件
一套组件可以在微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

导航栏自定义
全局使用自定义navBar时，注意【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）
提示：以下是本篇文章正文内容，下面案例可供参考

1.前提准备：utils/util适配不同机型

//获取机型环境，适配不同机型
export function getSystemInfo() {
  if (Taro.globalSystemInfo && !Taro.globalSystemInfo.ios) {
    return Taro.globalSystemInfo;
  } else {
    // h5环境下忽略navbar
    if (!isFunction(Taro.getSystemInfoSync)) {
      return null;
    }
    let systemInfo = Taro.getSystemInfoSync() || {
      model: "",
      system: ""
    };
    let ios = !!(systemInfo.system.toLowerCase().search("ios") + 1);
    let rect;
    try {
      rect = Taro.getMenuButtonBoundingClientRect
        ? Taro.getMenuButtonBoundingClientRect()
        : null;
      if (rect === null) {
        throw "getMenuButtonBoundingClientRect error";
      }
      //取值为0的情况  有可能width不为0 top为0的情况
      if (!rect.width || !rect.top || !rect.left || !rect.height) {
        throw "getMenuButtonBoundingClientRect error";
      }
    } catch (error) {
      let gap = ""; //胶囊按钮上下间距 使导航内容居中
      let width = 96; //胶囊的宽度
      if (systemInfo.platform === "android") {
        gap = 8;
        width = 96;
      } else if (systemInfo.platform === "devtools") {
        if (ios) {
          gap = 5.5; //开发工具中ios手机
        } else {
          gap = 7.5; //开发工具中android和其他手机
        }
      } else {
        gap = 4;
        width = 88;
      }
      if (!systemInfo.statusBarHeight) {
        //开启wifi的情况下修复statusBarHeight值获取不到
        systemInfo.statusBarHeight =
          systemInfo.screenHeight - systemInfo.windowHeight - 20;
      }
      rect = {
        //获取不到胶囊信息就自定义重置一个
        bottom: systemInfo.statusBarHeight + gap + 32,
        height: 32,
        left: systemInfo.windowWidth - width - 10,
        right: systemInfo.windowWidth - 10,
        top: systemInfo.statusBarHeight + gap,
        width: width
      };
      console.log("error", error);
      console.log("rect", rect);
    }

    let navBarHeight = "";
    if (!systemInfo.statusBarHeight) {
      //开启wifi和打电话下
      systemInfo.statusBarHeight =
        systemInfo.screenHeight - systemInfo.windowHeight - 20;
      navBarHeight = (function () {
        let gap = rect.top - systemInfo.statusBarHeight;
        return 2 * gap + rect.height;
      })();

      systemInfo.statusBarHeight = 0;
      systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
    } else {
      navBarHeight = (function () {
        let gap = rect.top - systemInfo.statusBarHeight;
        return systemInfo.statusBarHeight + 2 * gap + rect.height;
      })();
      if (ios) {
        systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
      } else {
        systemInfo.navBarExtendHeight = 0;
      }
    }

    systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
    systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
    systemInfo.ios = ios; //是否ios
    Taro.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
    // console.log('systemInfo', systemInfo);
    return systemInfo;
  }
}

export function isFunction(fn) {
  return Object.prototype.toString.call(fn) === '[object Function]';
}

2.NavBar组件

import { isFunction, getSystemInfo } from "@/utils/util";
import { Component } from "react";
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import "./index.scss";

let globalSystemInfo = getSystemInfo();

class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      configStyle: this.setStyle(globalSystemInfo)
    };
  }
  static options = {
    multipleSlots: true,
    addGlobalClass: true
  };
  componentDidShow() {
    if (globalSystemInfo.ios) {
      globalSystemInfo = getSystemInfo();
      this.setState({
        configStyle: this.setStyle(globalSystemInfo)
      });
    }
  }
  handleBackClick() {
    if (isFunction(this.props.onBack)) {
      this.props.onBack();
    } else {
      const pages = Taro.getCurrentPages();
      if (pages.length >= 2) {
        Taro.navigateBack({
          delta: this.props.delta
        });
      }
    }
  }
  handleGoHomeClick() {
    if (isFunction(this.props.onHome)) {
      this.props.onHome();
    }
  }
  handleSearchClick() {
    if (isFunction(this.props.onSearch)) {
      this.props.onSearch();
    }
  }
  static defaultProps = {
    extClass: "",
    background: "rgba(255,255,255,1)", //导航栏背景
    color: "#000000",
    title: "",
    searchText: "点我搜索",
    searchBar: false,
    back: false,
    home: false,
    iconTheme: "black",
    delta: 1
  };

  state = {};

  setStyle(systemInfo) {
    const {
      statusBarHeight,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      windowWidth
    } = systemInfo;
    const { back, home, title, color } = this.props;
    let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
    let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距

    let navigationbarinnerStyle = [
      `color:${color}`,
      //`background:${background}`,
      `height:${navBarHeight + navBarExtendHeight}px`,
      `padding-top:${statusBarHeight}px`,
      `padding-right:${leftWidth}px`,
      `padding-bottom:${navBarExtendHeight}px`
    ].join(";");
    let navBarLeft = [];
    if ((back && !home) || (!back && home)) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:0px`,
        `margin-right:${rightDistance}px`
      ].join(";");
    } else if ((back && home) || title) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:${rightDistance}px`
      ].join(";");
    } else {
      navBarLeft = [`width:auto`, `margin-left:0px`].join(";");
    }
    return {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    };
  }

  render() {
    const {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    } = this.state.configStyle;
    const {
      title,
      background,
      backgroundColorTop,
      back,
      home,
      searchBar,
      searchText,
      iconTheme,
      extClass
    } = this.props;
    let nav_bar__center = null;
    if (title) {
      nav_bar__center = <text>{title}</text>;
    } else if (searchBar) {
      nav_bar__center = (
        <View
          className="lzh-nav-bar-search"
          style={`height:${capsulePosition.height}px;`}
          onClick={this.handleSearchClick.bind(this)}
        >
          <View className="lzh-nav-bar-search__icon" />
          <View className="lzh-nav-bar-search__input">{searchText}</View>
        </View>
      );
    } else {
      /* eslint-disable */
      nav_bar__center = this.props.renderCenter;
      /* eslint-enable */
    }
    return (
      <View
        className={`lzh-nav-bar ${ios ? "ios" : "android"} ${extClass}`}
        style={`background: ${
          backgroundColorTop ? backgroundColorTop : background
        };height:${navBarHeight + navBarExtendHeight}px;`}
      >
        <View
          className={`lzh-nav-bar__placeholder ${ios ? "ios" : "android"}`}
          style={`padding-top: ${navBarHeight + navBarExtendHeight}px;`}
        />
        <View
          className={`lzh-nav-bar__inner ${ios ? "ios" : "android"}`}
          style={`background:${background};${navigationbarinnerStyle};`}
        >
          <View className="lzh-nav-bar__left" style={navBarLeft}>
            {back && !home && (
              <View
                onClick={this.handleBackClick.bind(this)}
                className={`lzh-nav-bar__button lzh-nav-bar__btn_goback ${iconTheme}`}
              />
            )}
            {!back && home && (
              <View
                onClick={this.handleGoHomeClick.bind(this)}
                className={`lzh-nav-bar__button lzh-nav-bar__btn_gohome ${iconTheme}`}
              />
            )}
            {back && home && (
              <View
                className={`lzh-nav-bar__buttons ${ios ? "ios" : "android"}`}
              >
                <View
                  onClick={this.handleBackClick.bind(this)}
                  className={`lzh-nav-bar__button lzh-nav-bar__btn_goback ${iconTheme}`}
                />
                <View
                  onClick={this.handleGoHomeClick.bind(this)}
                  className={`lzh-nav-bar__button lzh-nav-bar__btn_gohome ${iconTheme}}`}
                />
              </View>
            )}
            {!back && !home && this.props.renderLeft}
          </View>
          <View
            className="lzh-nav-bar__center"
            style={`padding-left: ${rightDistance}px`}
          >
            {nav_bar__center}
          </View>
          <View
            className="lzh-nav-bar__right"
            style={`margin-right: ${rightDistance}px`}
          >
            {this.props.renderRight}
          </View>
        </View>
      </View>
    );
  }
}

export default NavBar;

3.样式

view,
text,
scroll-view,
input,
button,
image,
cover-view {
  box-sizing: border-box;
}
page {
  /* prettier-ignore */
  --height: 44PX; /* 4*2+32 */
  /* prettier-ignore */
  --right: 97PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  /* prettier-ignore */
  --navBarHeight: 68PX;
  box-sizing: border-box;
}
.lzh-nav-bar .ios {
  /* prettier-ignore */
  --height: 44PX; /* 4*2+32 */
  /* prettier-ignore */
  --right: 97PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lzh-nav-bar .android {
  /* prettier-ignore */
  --height: 48PX; /* 8*2+32 */
  /* prettier-ignore */
  --right: 96PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lzh-nav-bar .devtools {
  /* prettier-ignore */
  --height: 42PX; /* 5*2+32 */
  /* prettier-ignore */
  --right: 88PX; /* 10+87 */
  /* prettier-ignore */
  --navBarExtendHeight: 4PX;
  box-sizing: border-box;
}
.lzh-nav-bar__inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  /* prettier-ignore */
  height:  var(--navBarHeight);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: 100%;
  /* prettier-ignore */
  padding-top: 20PX;
  /* prettier-ignore */
  padding-bottom:4PX;
  .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.lzh-nav-bar__inner .lzh-nav-bar__left {
  position: relative;
  width: var(--right);
  /* prettier-ignore */
  height: 32PX;
  /*  padding-left: 10PX; */
  /* prettier-ignore */
  margin-left:10PX;
  display: flex;
  align-items: center;
}
.lzh-nav-bar__buttons {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  /* prettier-ignore */
  border-radius: 16PX;
  border: 1px solid rgba(204, 204, 204, 0.6);
  position: relative;
}
.lzh-nav-bar__buttons.android {
  border: 1px solid rgba(234, 234, 234, 0.6);
}
.lzh-nav-bar__buttons::after {
  position: absolute;
  content: "";
  width: 1px;
  /* prettier-ignore */
  height: 18.4PX;
  background: rgba(204, 204, 204, 0.6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.lzh-nav-bar__buttons.android::after {
  background: rgba(234, 234, 234, 0.6);
}
.lzh-nav-bar__button {
  width: 50%;
  height: 100%;
  display: flex;
  /* prettier-ignore */
  font-size: 12PX;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 2em;
}

.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_goback:active,
.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_gohome:active {
  opacity: 0.5;
}
.lzh-nav-bar__inner .lzh-nav-bar__center {
  /* prettier-ignore */
  font-size: 17PX;
  /* prettier-ignore */
  line-height: 17PX;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* prettier-ignore */
  padding-left: 10PX;
  text {
    margin-top: -2px;
  }
}
.lzh-nav-bar__inner .lzh-nav-bar__loading {
  font-size: 0;
}
.lzh-nav-bar__inner .lzh-nav-bar__loading .lzh-loading {
  margin-left: 0;
}
.lzh-nav-bar__inner .lzh-nav-bar__right {
  /* prettier-ignore */
  margin-right: 10PX;
}
.lzh-nav-bar__placeholder {
  height: var(--navBarHeight);
  background: #f8f8f8;
  position: relative;
  z-index: 50;
  visibility: hidden;
}

.lzh-nav-bar-search {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* prettier-ignore */
  height: 32PX;
  /* prettier-ignore */
  border-radius: 16PX;
  position: relative;
  background: #f6f6f6;
}

.lzh-nav-bar-search__input {
  height: 100%;
  display: flex;
  align-items: center;
  color: #999;
  /* prettier-ignore */
  font-size: 15PX;
  /* prettier-ignore */
  line-height: 15PX;
}
.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_goback {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
}
.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_goback.white {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_gohome {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  /* prettier-ignore */
  background-size: 22PX 22PX;
}
.lzh-nav-bar__inner .lzh-nav-bar__left .lzh-nav-bar__btn_gohome.white {
  background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
  /* prettier-ignore */
  background-size: 22PX 22PX;
}
.lzh-nav-bar-search__icon {
  /* prettier-ignore */
  width: 22PX;
  /* prettier-ignore */
  height: 22PX;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

4.使用

	<NavBar
          background="#43BA6A"
          color="#fff"
          iconTheme="white"
          back
          renderCenter={
            <View
              className="trace-rowAlignCenter"
            >
              自定义导航栏标题
            </View>
          }
        />

-雾里-

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Taro开发】-自定义导航栏NavBar（五）

Taro小程序开发系列文章的所有文章的目录【Taro开发】-初始化项目（一）【Taro开发】-路由传参（二）【Taro开发】-taro-ui（三）【Taro开发】-带token网络请求封装（四）文章目录Taro小程序开发前言1.前提准备：utils/util适配不同机型2.NavBar组件3.样式4.使用前言基于Taro的微信小程序开发，主要组件库为Taro-uiTaro-ui：基于 Taro 开发 UI 组件一套组件可以在微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（
复制链接

扫一扫