ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装

相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求，不够要说明的是小程序右上角的胶囊是不能自定义的哦，除了胶囊其他地方都是可以根据自己的项目而定了，在一次小程序开发中就需要对顶部进行自定义在此记录一下自己封装这个组件的过程。

组件编写

既然今天需要把导航栏封装为组件那么就需要以下几个步骤：

组件结构搭建

首先搭建一个如下图的结构：

然后在index中引入刚刚创建好的组件：

记得在json文件中添加引用路径如图一，此时就会看到首页效果如下：

组件基础代码编写

此时我们就需要根据官方文档查看得知如果要定制必须在配置文件中修改默认的配置文件，其实这里可以针对某个页面page进行设置，以index为例在index.json文件中配置如下代码即可看到如下效果：

这个时候我们就可以开始写自己想要的样子了，首先写一个简单的就只有一个返回按钮，当开始写的时候就会发现一个很大的问题，这块高度多少？最上面的状态栏高度又是多少？貌似被这两个问题难住了，这个时候再去看看官方的api文档你会发现可以获取系统当前更多参数里面就有状态栏高度，如图：

其实想想我们只知道状态栏高度，除了状态栏的高度其余高度呢？又是一个问题。从微信小程序的官方设计文档中可以知道这部分高度貌似一样高，如图：

貌似这块多高都可以，毕竟还可以向下延伸，经过多次测试(可能不准确)在苹果好安卓还是会有差别的，所以自己弄了一个适配一部分的(貌似旧手机不支持沉沉侵式)。可能废话太多，直接上代码吧

结构

标题

这里的主要思路就是用fixed定位，后面会有内容顶到底部的布局，所以全部用定位会方便些，整体就两个部分一个是状态栏一个就是标题和按钮的部分了。

样式

.topbar { position: fixed; left: 0; top: 0; width: 100%; z-index: 9999;}.status { width: 100%;}.navbar { width: 100%; display: flex; justify-content: flex-start; align-items: center; position: relative;}.navbar_back { padding: 0 32rpx; display: flex; justify-content: flex-start; align-items: center; height: 100%;}.navbar_back image { width: 21rpx; height: 34rpx;}.navbar_title { position: absolute; left: 0; top: 0; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; z-index: -1;}.navbar_title view { width: 40%; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 38rpx;}

样式中没有太多的东西，唯一需要说的就是大部分模块都是定位做的，唯一没考虑好的就是标题太长不好处理，这里用了简单粗暴的方法给设定一个宽度。

逻辑处理

Component({ properties: { /** * 自定义返回事件处理 * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn" */ customBackReturn: { type: Boolean, value: false } }, data: { }, methods: { backClick() { if (this.data.customBackReturn) { this.triggerEvent("customBackReturn") } else { if (getCurrentPages().length == 1) { wx.switchTab({ url: '/pages/index/index', }) } else { wx.navigateBack({ delta: 1 }) } } } }, attached() { var self = this; wx.getSystemInfo({ success(res) { var isIos = res.system.indexOf('iOS') > -1; self.setData({ statusHeight: res.statusBarHeight, navHeight: isIos ? 44 : 48 }) } }) }})

逻辑中主要在两个地方一个是获取系统信息时对于导航高度的判断，另外一个是返回上一页的逻辑，默认就是打开首页(注意用的api)，如果有自定义事件就用自定义事件customBackReturn

效果

目前效果就和没有自定义之前差不多就是一个普通的返回按钮和标题文字，如下图：

那么这样一个简单的自定义导航栏就ok了，但是如果是这样那我还自定义干嘛用小程序自带的不是更好，所以我们要继续改进，给加一个返回主页的按钮。

带返回按钮的导航

小程序中特别是分享出去的页面，如果没有一个返回主页的按钮，用户更本不知道怎么回到小程序的主页，所以给用户带来了很大的不便，因此这样的需求就必须要有了，如果实现呢？其实很简单，毕竟已经出来一个了，需要的就是加一个上去就行了。

结构

标题

大家注意到我把之前的代码注释了而不是直接在前面的代码上修改，其实这里留着是为了后面可以自定义想要那种导航形式。

样式

.navbar_home { margin-left: 32rpx; display: flex; justify-content: flex-start; align-items: center; border-radius: 33rpx; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0,0,0,0.2); box-sizing: border-box; padding: 10rpx 0;}.navbar_home image:first-child { width: 21rpx; height: 34rpx; padding: 0 32rpx; border-right: 1px solid rgba(255,255,255,0.2);}.navbar_home image:last-child { width: 37rpx; height: 35rpx; padding: 0 32rpx;}

同样的样式也只是在之前的基础上增加了上面这些样式。

逻辑

homeClick() { wx.switchTab({ url: '/pages/index/index', }) }

逻辑也只是在methods中添加一个返回主页的事件而已，这里需要大家根据自己的项目情况而定。

效果

样式大家可以根据自己项目而定。

到这两部分的功能都完成了，但是如果现在我们在首页中添加一些内容你就会发现问题了，如下：

我们的内容也跑到上面了，不过这么一想内容顶到顶部不就是这种效果吗，所以解决了这个问题，可现在的问题是不想要这种怎么办呢？想想这个应该很好办啊，我在这一部分给加一个等高的块不定位不就可以了，所以现在就来实现它，代码如下：

标题

效果如下：

当我们把false改为true是就可以得到内容顶到顶部的效果了，所以这样就实现了两种效果，既然我们这里是封装为组件，那么我们不可能就这样写的，需要进行一些封装，然后给其他页面配置然后使用，所以需要改造。

封装导航栏使其可定制化

为了能使使用更加方便，需要对上面的导航栏进行进一步封装以适应不同需求。

结构改造

首先需要改造的就是结构，让更多的选项能够进行配置，结构改造如下：

{{header.title}}

上面所有的参数都是可以配置的，这就大大的给了开发者定制不同风格了，如果还是有不符合的建议你直接修改上面的代码或者自己封装一个更好。

逻辑改造

Component({ properties: { header: { type: Object, value: { homeCapsule: false, headerbg: "#fff