微信小程序电商实战-你所困扰的自定义顶部导航栏都在这，微信小程序字体大小调整

再实际情况中我们往往需要对自定义导航进行各种各样的定制化因此我们希望封装一个最基本的导航栏用于解决适配问题其他样式的导航栏仅需对其进行二次封装无需在关心适配问题对于这个项目我们封装组件如下：  ComponentBaseNavigation 导航栏基本组件用于解决适配问题  ComponentHomeNavigation 引入基本导航组件定制化首页导航栏组件  ComponentCommonNavigation 引入基本导航组件定制化其他页面导航组件

对于适配不通手机顶部的状态栏高度我们需要利用微信wx.getSystemInfo获取状态栏的高度因此在user model中新增如下代码(src/models/user.js)

// 省略其他无关代码 import Taro from '@tarojs/taro' export default { namespace: 'user', mixins: ['common'], state: { systemInfo: {}, }, async setup({ put }) { // 新增初始化获取用户手机系统相关信息存储到redux全局状态中 Taro.getSystemInfo().then(systemInfo => put({ type: 'update', payload: { systemInfo } }), ) } }  

实现组件逻辑(src/components/base/navigation/navigation.js)

import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import { connect } from '@tarojs/redux' import './navigation.scss' @connect(({ user }) => ({ // 链接redux中存储的状态栏高度到组件中 statusBarHeight: user.systemInfo.statusBarHeight, })) class ComponentBaseNavigation extends Component { static defaultProps = { color: 'white', backgroundColor: '#2f3333', } render() { const { statusBarHeight, backgroundColor, color } = this.props const barStyle = { paddingTop: `${statusBarHeight}px`, backgroundColor, color, } return ( <View className="navigation"> <View className="bar" style={barStyle}> {this.props.children} </View> <View className="placeholder" style={barStyle} /> </View> ) } }  

export default ComponentBaseNavigation

样式如下(src/components/base/navigation.scss) // 大写的PX单位是为了告诉Taro不要转换成单位rpx // 通过测试和观察发现微信顶部的胶囊宽高如下并且各个屏幕下一致 // 因此采用PX单位 $capsule-padding: 6PX; // 胶囊的上下padding距离 $capsule-height: 32PX; // 胶囊的高度 $capsule-width: 88PX; // 胶囊的宽度 $navigation-height: $capsule-padding * 2 + $capsule-height; $navigation-font-size: 15PX; $navigation-icon-font-size: 25PX; $navigation-box-shadow: 0 2PX 2PX #222; .navigation { position: relative; background: transparent; .bar { position: fixed; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: $navigation-height; z-index: 1; font-size: $navigation-font-size; } .placeholder { display: block; height: $navigation-height; background: transparent; } }  

标签： 微信导航组件我们