小程序实现 Tab 标签栏

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

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

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


小程序实现 Tab 标签栏

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


小程序实现 Tab 标签栏
page部分的实现

下面给大家看下运行结果


小程序实现 Tab 标签栏
效果图

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

上一篇:关于激励和自我激励


下一篇:AMD加载器实现笔记(四)