今天，带大家啃一块较难啃得骨头，tabBar顶栏的开发。按照惯例，先上个效果图，让大家了解下什么是tabBar顶栏。由微信小程序开发提供

tabBar顶栏

这顶栏在各个app中应用的还是挺多的，像今日头条的首页，如图一中所示：

图一

好了，废话不多说，直接源码走起。

图二

图三

图四

关于图二至图四中所示的文件中，各起什么作用，在我的前面几章里有所讲述，在这里就不在赘述了。

主要给大家说一下<swiper>这个标签，它是小程序中的组件，代表的是滑动。这个标签中的子标签<swiper-item>构成了一组数组。<swiper>中的current属性代表得是当前所在页面的 index，index从0开始。所以基于这个current属性，咱们就可以制作出点击顶栏中某一个元素，滑动区域动态的显示某一个元素。

再告诉大家一个我发现的小东西，当然是百度出来的。图二中view标签中有个data-current属性，在.js文件中怎么得到他的值呢？咱们就可以通过e.target.dataset.current来得到了。

今天的教程就到此结束了。想要顶栏的源码的可以和我私聊。下一回，将带大家了解小程序怎么和后台来交互。