小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar

最新推荐文章于 2024-08-06 15:09:03 发布

hangGe0111

最新推荐文章于 2024-08-06 15:09:03 发布

阅读量4.7w

点赞数 2

分类专栏：微信小程序文章标签： &amp;quot;navigationStyle&amp;quot;: &amp;quot;custom&amp;quot; 自定义导航栏自定义导航栏组件化

本文链接：https://blog.csdn.net/hangGe0111/article/details/85232022

版权

本文详细介绍了如何在微信小程序中实现自定义头部导航栏和tabBar。通过在app.json设置`navigationStyle: "custom"`，并创建自定义导航栏组件，实现了全页面的自定义导航效果。同时，提供了官方文档链接和推荐资源，帮助开发者更好地理解和应用自定义tabBar。

摘要由CSDN通过智能技术生成

一、自定义顶部导航

1.在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏；

2.代码部分

2.1首先在app.json的window中配置"navigationStyle": "custom"（使用自定头部导航栏）

2.2导航栏组件部分

（1）custom-component.wxml

<!-- 组件 custom-component.wxml -->
<custom-component>
  <view class='flex commonHead' style='color:{
  {myProperty.color?myProperty.color:"#000"}};background-color:{
  {myProperty.bg_color?myProperty.bg_color:"white"}};height:{
  {commonHeadHeight.titleHeight}}px;'>
    <view class='commonHead-wrap flex'>
    <!-- 0:无返回；1：返回上一级；2：home -->
      <view class='commonHead_left'>
        <view wx:if="{
  {myProperty.flag==1}}" class='commonHead_left_back' bindtap='commonHead_left_back'></view>
        <view wx:if="{
  {myProperty.flag==2}}" class='commonHead_left_home' bindtap='commonHead_left_home'></view>
      </view>
      <view class='commonHead_right flex'>
        <view class='commonHead_right_text line1'>{
  {myProperty.name?myProperty.name:"我是标题"}}</view>
      </view>
    </view>
  </view>
</custom-component>

(2)custom-component.wxss

/*弹性布局*/

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.noWarp {
  flex-wrap: nowrap;
}

/*元素居中*/

.alignC {
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}

/*水平排列*/

.flexH {
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

/*垂直排列*/

.flexV {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

/*两端对齐*/

.flexSa {
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
}

/*居中对齐*/

.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

.flexSb {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
}

.flexS {
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
}

.flexE {
  -webkit-box-pack: end;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
}

.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commonHead {
  width: 100%;
  height: 128rpx;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.commonHead-wrap {
  width: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  bottom: 0;
  height: 45px;
  line-height: 45px;
}

.commonHead_left {
  width: 100rpx;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0
}

.commonHead_left_back {
  width: 100%;
  height: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAACrhJREFUeNrt3E2IlPcdwPH/M4o1rUklNJHapdDQYBWaZJ1dhfQg5KURjNFoNkXTHAq5iGkPekgJJCFrCw3SQCi6l1wsZJOaimslJVTydoigzuzS5tC0Ui9lWWvxhaohCdn59zCdpLUx7s7OM888z/P5XJadffvNHPbL7//MTAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQltt237b7tt1f+crq0dWjq0eXLGneWqlkPRe9Kcl6AKDbkqRarVar1Q0bQgwxxK1bw+qwOqy+995wPBwPxxcvbn1nHIkjcWR6OiwPy8PyP/0peSl5KXnp8OH5N8y/Yf4Ne/ce23ps67Gt//hH1veIbAgIlEAzGN/5Tnw6Ph2f/vWvk+FkOBkeHGz7F24P28P2S5eSncnOZOeuXbXztfO187t3N78YY9b3l+4QECiw6oXqheqFe+8Nd4e7w92vvtq89atf7fgfejG8GF78zW8W3bHojkV3/PCH7yTvJO8kn3yS9f0nXfOzHgDovJVPrnxy5ZP33Rffj+/H98fGkpCEJCxcmNoffCw8Fh77wQ8urr+4/uL6f/6zeeOPf5z140C6bCBQIP1H+4/2H127NqkklaRy8GCyPdmebE8xHFcTQwzxvvvq4/Xx+vgf/pD140I6PLsCCqBnwtEyHIbD8M9/nvXjQroEBHKsdVTVM+FoeSY8E54ZGBjYNbBrYNeyZVmPQzpcA4Ecam0coRIqoZfCcYXGkcaRxpF77ml+9pe/ZD0PnWUDgRzp2Y3jagbDYBj85jezHoN02EAgB/KycVwpWZIsSZYsWpT1HKRDQKCHtTaOvIXjUzeGG8ONU1NZj0E6BAR6UF43jis17mrc1bjrj3/Meg7S4XUg0EN67um4c/LBB82PN91Ur9fr9Xrrc4rCBgI9IPdHVVd6I7wR3tizp764vri+WDiKSkAgQ0U5qvrUjrAj7JicrFyqXKpceu65rMchXQICGSjWUVUIcU/cE/d8+GHl0cqjlUc3bTpx8sTJEyfPns16LtIlINBFhTuqGggDYeDjj+PN8eZ488MP107WTtZOHj+e9Vh0h4vo0AWfhuOB8EB4YGysKOFoPNF4ovHEQw9N3DJxy