微信小程序实现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里面即可通过事件对象里面的ecurrentTargetdatasetindex属性获取用户点击按钮的索引值。

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

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

ecurrentTargetdatasetindex获取用户点击按钮的索引值，微信小程序通过thissetData()去修改data里面的数据内容。

在ios部分手机里面出现边框模糊问题

若只改宽度后还是出现模糊，需要高度也设置为(奇数或奇数5) 2

2修改css 通过设置after样式设置边框

从一张设计图的实现说起

为什么模拟器下 iPhone6的分辨率是375，而设计图一般给750？

pt也称为逻辑分辨率

pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位

px指物理分辨率，和屏幕尺寸没有关系。点没有大小之说

1个pt可以由一个px构成，也可以有两个，还可以有三个甚至更多

iPhone6下2个px才构成一个pt

以iPhone6物理像素750X1334为视觉稿进行设计，而在小程序中使用rpx为单位

iPhone6下1px = 1rpx = 05pt

使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px单位则不会

iPhone6下1px = 1rpx   (容易换算)

iPhone plus 下 1px = 06rpx

在使用uniapp 开发微信小程序的过程中 发现使用border:1rpx 时 在ios系统中正常显示 但是换到安卓系统中边框变得很粗

解决办法：

1rpx 换成05px或更小

自己理解：

ios系统在小程序中最小单位为1px 有小数存在的话会向上取整 例如01px 会转化成1px

安卓系统中px会精确到小数位

所以03px 在安卓端会按照03px渲染 在ios端会按照1px渲染

关于是否使用rpx还是px，首先需要明白两者之间的区别。

rpx：微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准，一般设计师出图为2倍图。

px：iphone6上1px=2rpx

1rpx相当于1个物理像素，何为物理像素，就相当于我们所使用的屏幕的尺寸，只不过换了一种说法叫物理像素，而我们平时css中所用到的px,实际上是数据显示的尺寸，比如文字，、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁，而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

box{  width:300rpx;  height:200rpx;  border:1rpx solid black;  font-size:30rpx;}bo{   width:300px;  height:200px;  border:1px solid black;  font-size:30px;}

结果：

所以，小程序中字体大小用rpx还是px要结合设计师出图的文字大小，建议的话还是以rpx为主。

该功能基于vue-cli3；cli2的方法大差不差

以上两步就可以实现小程序中rpx功能，针对设计稿为750px的移动端。

以上就是关于微信小程序实现tab切换全部的内容，包括:微信小程序实现tab切换、微信小程序1rpx边框问题、移动设备的分辨率和rpx等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！