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

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

小女子也是刚入门微信小程序不久，发现微信内部很多组件都已经封装好了，但是却没有tab选项卡效果的组件，最近正好需要用到，就研究了一下。整理出来供大家一起探讨学习，哪里有问题或者可以改进的地方，欢迎大家指点吐槽。

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

请结合如下效果图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

demo.wxml：

-

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

最终演示效果如下：

总结： Kagami_Tiger的原理是选取tab，就调用选取tab的内容并隐藏其他tab内容，当然如果可以是把每个tab分类分别处于不同的页面，然后每个tab一一对应每个不同的页面，那样或许会更好。我没有那么开发过，也欢迎大家分享，相互学习举一反三，才能一起进步。

更多 微信小程序：如何实现tabs选项卡效果示例相关文章请关注PHP中文网！

相关文章：

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

简约时尚的纯CSS3 Tabs选项卡特效

javascript实现tabs选项卡切换效果

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