首先外层使用 View 包裹。我们可以把 View 当作 HTML 中的 div 标签使用来理解就行
其次,实现多标签我们首先想到什么,数组。在小程序中数组是怎么嵌套在标签中的? wx:for="{{navTab}}"。 即可。
在 Page 页面的 data 中把数据初始化即可显示出值。那么我们怎么确定当前的标签呢。通过 class 中的current==idx ? ‘active’ : ‘’ 即可。打的不清楚,直接上截图
![img_e8e19c7e86bf812be37a14992adb7a67.png](https://yqfile.alicdn.com/img_e8e19c7e86bf812be37a14992adb7a67.png?x-oss-process=image/resize,w_1400/format,webp)
这里点击跳转到其他标签的函数是通过 bindtab 属性来定义的,所以我们在 Page 中实现该函数即可,上截图
![img_b36e5a18ccd1631cf915447fe5a5e348.png](https://yqfile.alicdn.com/img_b36e5a18ccd1631cf915447fe5a5e348.png?x-oss-process=image/resize,w_1400/format,webp)
page部分的实现
下面给大家看下运行结果
![img_9c8eae5863622b456a208c8f4610e654.png](https://yqfile.alicdn.com/img_9c8eae5863622b456a208c8f4610e654.png?x-oss-process=image/resize,w_1400/format,webp)
效果图
好了,到此一个简单的 Tab 标签就实现了。