微信小程序实现tab切换

微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于 *** 作数据。

下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：

在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。

把切换按钮btns和携雀内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。

通过d性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应辩猛早的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。

逻辑层添加了active数据控制当前显示盒子。

wxml要书写判断验证去控制盒子是否有cur类知游名。

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。

有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。

首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。

给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。

e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。

app.json 直接配置:

官方文档： 自定义 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 组件库。

app.json 配置：

在 tab 页面的 page.json 中引入 tabbar 组件即州斗可：

wxml 使用：

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

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

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

参照微信小程序官方文档， 自定义tabbar ，但该文档只是实现了自定义tabbar，没有实现不同角色不同的梁棚睁tabbar，且官方文档中的custom-bab-bar组件中的setData方法存在在真机上不能重新渲染的bug，可能是由于缓存造成的。

本项目仓库： customtabbar 。

主要是在tab的页面组件中调用getTabBar接橡岁口后再调用setData方法和铅，从而实现了tabbar的重新渲染。

---