小程序实现 Tab 标签栏

首先外层使用 View 包裹。我们可以把 View 当作 HTML 中的 div 标签使用来理解就行

其次，实现多标签我们首先想到什么，数组。在小程序中数组是怎么嵌套在标签中的？ wx:for="{{navTab}}"。 即可。

在 Page 页面的 data 中把数据初始化即可显示出值。那么我们怎么确定当前的标签呢。通过 class 中的current==idx ？ ‘active’ ： ‘’ 即可。打的不清楚，直接上截图

这里点击跳转到其他标签的函数是通过 bindtab 属性来定义的，所以我们在 Page 中实现该函数即可，上截图

page部分的实现

下面给大家看下运行结果

效果图

好了，到此一个简单的 Tab 标签就实现了。