java小程序任务栏,微信小程序自定义组件实现 tabBar、navBar

最近App项目要将其中一个模块抽出来做成小程序， 功能包含 ：底部的Tab栏，顶部的标题栏

这里选择自定义的原因有两点：

narBar 微信原生不支持设置返回图标，且在 Android 上标题是居左显示，在 iOS 上是居中显示。

底部的 tabBar 不支持点击跳页面，图标布局不支持超过 tabBar 的高度。

下面两张图是简单实现的效果。

以上效果我也是参考的网上例子来实现，可看该效果原作的分析。或者看看下面我的理解。

微信小程序自定义组件

文档中说明了自定义组件

可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。

也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

创建自定义组件

在最新的开发工具中已经支持直接创建组件了，创建一个 components目录，然后在创建一个组件对于的目录，例如这里创建的是tabbar目录，然后在该目录点击鼠标右键选择新建Component，输入组件名称即可，例如这里输入的是tabbar。

组件模板和样式

类似于页面，自定义组件拥有自己的wxml 模板和 wxss 样式

在组件模板中可以提供一个节点，用于承载组件引用时提供的子节点。这个节点相当于组件占位符。

默认情况wxml中只支持一个节点，可以设置支持多个节点：

布局编写好之后就开始设置样式了，在页面中可以通过wxss来定义，也可以通过设置组件的class名称，然后再调用该组件的 wxss中定义样式。

组件的wxss默认是不支持app.wxss样式的，但是可以像设置多一样，进行设置：

模板数据绑定

Component({ // 详细使用看文档 behaviors: [], properties: { myProperty: { // 属性名 type: String, // 类型(必填)，目前接受的类型包括：String, Number, Boolean, Object, Array, null(表示任意类型) value: '', // 属性初始值(可选)，如果未指定则会根据类型选择一个 observer(newVal, oldVal, changedPath) { // 属性被改变时执行的函数(可选)，也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange' // 通常 newVal 就是新设置的数据， oldVal 是旧数据 } }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached() { }, moved() { }, detached() { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show() { }, hide() { }, resize() { }, }, methods: { onMyButtonTap() { this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod() { // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange(newVal, oldVal) { } } }) 复制代码

在上面的代码中我们可以通过properties和setData结合实现动态设置数据，在methods中可以定义方法，用于给外部调用，也就是组件间的通信。

组件间通信

可以通过triggerEvent或者直接获取组件this.selectComponent示例来调用方法和属性。

triggerEvent

父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

开始使用组件

在页面的json文件中配置组件的路径，如下：

{ "usingComponents": { "navbar": "/components/navbar/index", "tabbar": "/components/tabbar/tabbar" } } 复制代码

在页面的wxml布局中添加，如下：

// 引入组件 // 内容 // 引入组件 复制代码

自定义 tabBar 组件分析

看文章顶部原作者的分析。下面介绍一些坑。

虽然在组件的js文件中已经设置了tabbar 但是在app.json中还是需要配置tabbar，详细配置可看文章顶部github链接。

在页面的onload中还需要再设置一次

wx.hideTabBar({ }) 复制代码

因为从分享页面点击左上角的首页图标回到首页会出现两个tabbar，所以在首页还需要再隐藏一次tabbar.

注意路径问题，新版的开发工具components文件应该在miniprogram下，和pages为同级，否则在引入组件的路径中可能会出错。

自定义 navBar 组件分析

小程序中分享出去的页面是没有返回按钮的，为了用户能够再次回到我们的小程序中，我们在 navbar 上自定义了一个返回按钮和返回首页的按钮。

这里通过小程序的场景值和使用一个全局的变量share来判断是否是从分享页面进来。在 app.js中做了处理：

// 判断是否由分享进入小程序 if (options.scene == 1007 || options.scene == 1008) { this.globalData.share = true } else { this.globalData.share = false }; 复制代码

为了适配顶部的高度，在wxml布局中还动态设置了一个margin-top的高度，这个高度通过获取系统的状态栏高度得到。

getSystemInfo: function () { let t = this; wx.getSystemInfo({ success: function (res) { // 获取高度 t.globalData.height = res.statusBarHeight; } }); }, 复制代码

然后在页面的data中设置组件的数据和状态栏的高度：

data: { // 组件所需的参数 nvabarData: { showCapsule: 0, //是否显示左上角图标 1表示显示 0表示不显示 title: '让故事发生', //导航栏 中间的标题 }, // 此页面 页面内容距最顶部的距离 height: app.globalData.height * 2 + 20, // tabbar tabbar: {}, }, 复制代码

原作者在实现图标的显示和隐藏部分逻辑和我的预期不一致，我想实现的是从分享页面进入才显示左上角的返回首页图标，正常也就只显示返回按钮。修改点后的wxml如下：

// 这里把 share 取反去掉 // 这里把 share 取反去掉 复制代码

本文完~，喜欢就点个赞呗。

作者：Aller_Dong

链接：https://juejin.im/post/5c3b35d2e51d455244740c66

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。