微信小程序实例：实现tabs选项卡效果

zhichi_admin

借鉴Kagami_Tiger 的方法：

很多组件微信内部已经封装完了，正好发现没有tab选项卡效果，这两天正好研究了下。思路如下：

1、首先点击导航的时候需要两个变量，一个存储当前点击样式类，一个是其它导航默认的样式类

2、选项卡内容列表同样也需要两个变量，一个存储当前显示块，一个存储的是其它隐藏的默认块

3、使用三目运算通过点击获取导航索引，根据索引判断是否添加当前类【备注，这里我将点击事件绑定在父级导航栏，通过target对象得到点击触发的事件对象属性】

请结合如下效果图：

      接下来直接查看源码：

demo.wxml：

1. <view class="tab">  
   
2.   <view class="tab-left" bindtap="tabFun">  
   
3.     <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view>  
   
4.     <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view>  
   
5.     <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view>  
   
6.     <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view>  
   
7.   </view>  
   
8.   
   
9.   <view class="tab-right">  
   
10.     <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>  
    
11.     <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>  
    
12.     <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>  
    
13.     <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>  
    
14.   </view>  
    
15. </view>  

复制代码

demo.js：

1. Page( {  
   
2.   data: {  
   
3.     tabArr: {  
   
4.       curHdIndex: 0,  
   
5.       curBdIndex: 0  
   
6.     },  
   
7.   },  
   
8.   tabFun: function(e){  
   
9.     //获取触发事件组件的dataset属性  
   
10.     var _datasetId=e.target.dataset.id;  
    
11.     console.log("----"+_datasetId+"----");  
    
12.     var _obj={};  
    
13.     _obj.curHdIndex=_datasetId;  
    
14.     _obj.curBdIndex=_datasetId;  
    
15.     this.setData({  
    
16.       tabArr: _obj  
    
17.     });  
    
18.   },  
    
19.   onLoad: function( options ) {  
    
20.     alert( "------" );  
    
21.   }  
    
22. });  

复制代码

demo.wxss：

1. .tab{  
   
2.     display: flex;  
   
3.     flex-direction: row;  
   
4. }  
   
5. .tab-left{  
   
6.     width: 200rpx;  
   
7.     line-height: 160%;  
   
8.     border-right: solid 1px gray;  
   
9. }  
   
10. .tab-left view{  
    
11.     border-bottom: solid 1px red;  
    
12. }  
    
13. .tab-left .active{  
    
14.     color: #f00;  
    
15. }  
    
16. .tab-right{  
    
17.     line-height: 160%;  
    
18. }  
    
19. .tab-right .right-item{  
    
20.     padding-left: 15rpx;  
    
21.     display: none;  
    
22. }  
    
23. .tab-right .right-item.active{  
    
24.     display: block;  
    
25. }  

复制代码

    最终演示效果如下：

这是Kagami_Tiger的思路和方法。

但是其实我们还可以用另外的更加小白的方法实现这个效果。

利用即速应用的小程序开发工具进行可视化的拖拽和点击实现这个功能。

进入即速应用的微信小程序制作方法我就不再提了，直接开始！！

1、点击［组建库］－－［分类］，点击［分类］后，分类组件自动在中间的制作页面出现，接着我们可以看到右边的分类栏选项，这里可以对分类栏进行添加多个tab还有样式调整。

2、点击［组件样式］，目前即速应用只有2种分类栏样式，一种是按钮型一种是文字颜色区分型，我直接选择了第二种，并且设置［选中后的颜色］是绿色，文字颜色灰色，字体13号，分类栏背景透明，高度是35（这个高度自己视觉决定吧！）

3、回到分类组件，可以看到因为我们小程序有多个页面，我们每个tab自然就一一对应每个页面，所以我的tab分类有言情（即我的首页）和悬疑，那么我的分类组件设置就是［言情］的页面链接至［首页］，［悬疑］的分类页面链接至［悬疑］

这样我们就完成了tab分类的设置，然后保存。

总结： Kagami_Tiger的原理是选取tab，就调用选取tab的内容并隐藏其他tab内容，即速应用制作tab的原理是把每个tab分类分别处于不同的页面，然后每个tab一一对应每个不同的页面。虽然实现的原理和Kagami_Tiger的不一样，但是我们的效果基本一样。一种适合程序员的开发，一种适合小白的开发吧。我推荐两种方法都学会，并且自己延伸举一反三，对自己自然是有益无害嘛，哈哈。

但是如果代码复杂，那么使用即速应用这个可视化拖拽的微信小程序开发工具来进行开发也是一个不错的选择！

欢迎大家吐槽，刚刚入门不久小程序开发，希望大家轻喷。。。

xiaochengxu

正需要，支持楼主大人了！

dtfyts

正需要，支持楼主大人了

hjko2009

楼主大人，我用急速应用分类组件制作的tab，在手机上测试的时候，每一个分类都点一遍之后就再也点不动了，必须点左上角微信自带的返回功能才行

lyj4532556

啥也不说了，感谢楼主分享哇！

jack56846

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊