小程序 tabbar

appjson 直接配置:

官方文档： 自定义 tabBar

custom-tab-bar/index

在小程序根目录下新建 custom-tab-bar 文件夹，文件夹下建立相应的组件。

wxml 文件：

推荐使用 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。不过现在使用 view 也可以，之前是因为使用 map 组件可能会导致无法覆盖，现在 map 组件已经支持同层渲染，所以使用 view 也是没问题的。

js 文件：

tabbar 的配置主要在这里。

因为每个 tab 页下的自定义 tabBar 组件实例是不同的，在跳转新的tab 后，是一个新的 tabbar 实例，先前那个已经被销毁了，所以要重新设置。

在每个自定义的 tab 页面 onShow 方法中，

可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。

为什么说是系统自定义的？

因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用，都是系统默认配置好的。

官方文档 Tabbar 。

通过 useExtendedLib 扩展库 的方式引入 weui 组件库。

appjson 配置：

在 tab 页面的 pagejson 中引入 tabbar 组件即可：

wxml 使用：

直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ，并将 appjson 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight，需要手动维护，系统不再维护。使用系统的 tabbar，屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ；而自定义的 tabbar 则没有计算 tabbar 高度，即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

样式和格式错误。

钉钉小程序新建目录样式不生效错误原因：

1、尚未添加相应的样式文件。

2、相应的样式文件格式有误。

3、样式文件未正确引用。

4、页面中使用的组件或元素类型不支持样式。

钉钉小程序是一种全新的开发模式，让移动开发者通过简捷的前端语法写出native级别的性能体验，并支持ios、安卓、等多端部署。

1在小程序更目录下初始化npm：

2在小程序 packagejson 所在的目录中执行命令安装 npm 包：

3安装vant包：

npm i @vant/weapp -S --production

4

5

报错如下图：

6

7然后在需要引入组件的页面中的json文件里按需引入即可

新建一个微信小程序，在小程序目录下 输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在小程序目录下，生成packagejson文件

通过 npm 安装

npm i @vant/weapp -S --production

通过 yarn 安装

yarn add @vant/weapp --production

之后的具体步骤参考 >

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp

Github源码： >

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中：

样式文件 indexwxss 中

布局文件 indexwxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题：

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后，发现自定义属性 item 获取值为 null

出现该种情况，应在 thissetData ( ) 之后，执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

以上就是关于小程序 tabbar全部的内容，包括:小程序 tabbar、钉钉小程序新建目录样式不生效、微信小程序开发工具——引入vant组件库等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！