微信小程序自定义导航栏

微信小程序自定义导航栏

开发微信小程序的时候有些功能时很特殊的,比如我需要在导航栏上添加返回上一页和首页的功能时现有的就不能满足了,好在小程序开发了这个功能使得大家可以自定义来实现这一功能,那么具体需要实现一个什么样的功能呢,我们先看看知乎小程序的的例子:

微信小程序自定义导航栏

有图就好办了,那么下面我们就来一步步实现这个功能。

一、首先添加一个组件如下:

微信小程序自定义导航栏

关键代码:

微信小程序自定义导航栏

微信小程序自定义导航栏

这样我们才算注册了一个组件。

二、实现如知乎那样的结构和样式

微信小程序自定义导航栏

结构代码,里面是已经写好了的结构和一些数值后面会做介绍

微信小程序自定义导航栏

微信小程序自定义导航栏

微信小程序自定义导航栏

样式部分

三、关键代码实现

首先需要在组件中注册生命周期函数attached来计算状态栏,导航栏等等的高度如下:

微信小程序自定义导航栏

组件需要传递的属性:

微信小程序自定义导航栏

点击返回和主页按钮事件如下:

微信小程序自定义导航栏

这里要特别注意的是目前是针对首页不是tabbar页面,如果是则修改为switchtab的api才可以。

四、组件的使用

微信小程序自定义导航栏

wxml中使用组件来显示

微信小程序自定义导航栏

首页标题已经可以了,但是没有两个按钮,那么我们添加代码跳转到其他页面看看,其他页面比需要和上面的首页一样的操作才可以

微信小程序自定义导航栏

到这里已经可以了,但是我们还需要看看分享页是不是好的,添加编译模式为分享,然后看看效果

微信小程序自定义导航栏

效果也出来了,只是样式有点不好,没关系大家可以自行修改下样式即可。

微信小程序自定义导航栏
微信小程序自定义导航栏


分享到:


相關文章: