微信小程序tab导航怎么开发

　　最近微信小程序的开发让不少爱好者学习得如火如荼，大家都觉得一系列的开发很有挑战*，而且也能给微信增添更多的小程序功能，接下来就一起来看看微信小程序tab导航怎么开发。

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

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

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

　　请结合如下效果图：

　　接下来直接查看源码：

　　demo.wxml：

　　tab-hd01

　　tab-hd01

　　tab-hd01

　　tab-hd01

　　tab-bd01

　　tab-bd02

　　tab-bd03

　　tab-bd04

　　demo.js：

　　Page( {

　　data: {

　　tabArr: {

　　curHdIndex: 0,

　　curBdIndex: 0

　　},

　　},

　　tabFun: function(e){

　　//获取触发事件组件的dataset属*

　　var _datasetId=e.target.dataset.id;

　　console.log("----"+_datasetId+"----");

　　var _obj={};

　　_obj.curHdIndex=_datasetId;

　　_obj.curBdIndex=_datasetId;

　　this.setData({

　　tabArr: _obj

　　});

　　},

　　onLoad: function( options ) {

　　alert( "------" );

　　}

　　});

　　demo.wxss：

　　.tab{

　　display: flex;

　　flex-direction: row;

　　}

　　.tab-left{

　　width: 200rpx;

　　line-height: 160%;

　　border-right: solid 1px gray;

　　}

　　.tab-left view{

　　border-bottom: solid 1px red;

　　}

　　.tab-left .active{

　　color: #f00;

　　}

　　.tab-right{

　　line-height: 160%;

　　}

　　.tab-right .right-item{

　　padding-left: 15rpx;

　　display: none;

　　}

　　.tab-right .right-item.active{

　　display: block;

　　}

　　最终演示效果如下：

　　微信小程序tab导航是众多小程序导航栏中的一种，这个开发出来也很方便的。具体开发步骤和源码，小编已经写在上文中了，想要获取更多相关资料请关注微信小程序素材网。

　　微信小程序导航布局技巧有哪些

　　微信小程序底部导航栏怎么开发

　　微信小程序头部导航栏设置实例