小程序滚动选项卡怎么开发？

　　微信小程序选项卡的开发包括很多方面，小程序顶部导航栏、小程序底部选项卡、以及今天要给大家讲述的小程序滚动选项卡的开发过程，一起来看看。

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

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

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

　　请结合如下效果图：

　　接下来直接查看小程序源码：

　　demo.wxml：

　　[plain] view plain copy

　　tab-hd01

　　tab-hd01

　　tab-hd01

　　tab-hd01

　　tab-bd01

　　tab-bd02

　　tab-bd03

　　tab-bd04

　　demo.js：

　　[plain] view plain copy

　　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：

　　[plain] view plain copy

　　.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;

　　}

　　最终演示效果如下：

　　看完以上资料，有没有觉得小程序滚动选项卡的开发其实还比较简单?参照上述教程，希望大家在进行操作的时候都能获取成功，更多相关资料请关注微信小程序素材网。

　　微信小程序底部选项卡开发实例

　　微信小程序选项卡切换怎么开发?

　　微信小程序文字滚动怎么设置?