微信小程序实现tab切换

微信

微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（Javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。 下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示： 在wXML文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。 把切换按钮btns和内容cons渲染出来。在JS文件里面书写数据，并且在wXML文件里面通过wx:for进行列表渲染输出。 通过弹性布局去书写样式。添加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里面的数据内容。