欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

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

发布：2018-01-25 15:50浏览： 次来源：网络 作者：tianshu

最近微信应用号是炒的如火如荼，热门满满，但是也可以发现搜索关键词出来，各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮，这几天先把小程序技术文档看了个遍，就直接着手写案例了。很多组件微信内部已经封装完了，正好发现没有tab选项卡效果，这两天正好研究了下。思路如下：

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

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

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


    接下来直接查看源码：
    demo.wxml：
  1.  
  2.     <view class="tab">  
  3.     <view class="tab-left" bindtap="tabFun">  
  4.       <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view>  
  5.       <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view>  
  6.       <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view>  
  7.       <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view>  
  8.     </view>  
  9.  
  10.     <view class="tab-right">  
  11.       <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>  
  12.       <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>  
  13.       <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>  
  14.       <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>  
  15.     </view>  
  16.     </view>
  17.  

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

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

    最终演示效果如下：


微信小程序实例：实现tabs选项卡效果(图1) 
微信小程序实例：实现tabs选项卡效果(图2) 



免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有