微信小程序实现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里面的数据内容。

可以通过按钮插件创建不同状态的按钮

（1）单个切换

注意:在Firefox多次页面加载时，按钮可能保持表单的禁用或选择状态

解决方案添加autocomplete=”off”

（2）单选按钮

（3）复选按钮

（4）加载状态

Button插件中的button方法中有三个参数:toggle、reset、string（比差枯如loading、complete）

（5）可代替data-toggle=”button”

通过点击可以折叠内容

基本实例

data-parent： 默认值为false，设置需指定父元素选择器，也就是说，选定其中一个折叠区，其他折叠将隐藏，实现手风琴效果。

data-toggle： 如果前面加data-*，设置’collapse’表示实现折叠；如果是javascript中的属性，默认为true，实现反转

手动调用

collapse方法还提供了三个参数：<a>hide、show、toggle</a>

Show.bs.collapse ： 在show方法调用时立即触发虚锋洞

Shown.bs.collapse ： 折叠区完全显示出来是触发

Hide.bs.collapse ： 在hide方法调用时触发

Hidden.bs.collapse ：基厅 该事件是折叠区域完全隐藏之后触发

例子

往后还会更新前端Bootstrap其他知识部分，谢谢大家阅读本人文章，祝愿大家心想事成！

---