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

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

最近微信应用号是炒的如火如荼，热门满满，但是也可以发现搜索关键词出来，各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮，这几天先把小程序技术文档看了个遍，就直接着手写案例了。很多组件微信内部已经封装完了，正好发现没有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){

//获取触发事件组件的http://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;

}

最终演示效果如下：

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。