今天小编给大家分享一下微信小程序怎么实现tab切换效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
成都创新互联从2013年成立，先为大祥等服务建站，大祥等地企业，进行企业商务咨询服务。为大祥企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
微信小程序之tab切换效果，如图：
最近在学习微信小程序并把之前的公司app搬到小程序上，挑一些实现效果记录一下（主要是官方文档里没说的，毕竟官方文档只是介绍功能）
.wxml代码：
系统提醒
优惠活动
for system
for activity
.wxss代码：
page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}.js代码：
Page({
data:{
selected:true,
selected1:false
},
selected:function(e){
this.setData({
selected1:false,
selected:true
})
},
selected1:function(e){
this.setData({
selected:false,
selected1:true
})
}
})以上就是“微信小程序怎么实现tab切换效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。
当前标题：微信小程序怎么实现tab切换效果-创新互联
文章URL：
http://bjjierui.cn/article/cdipph.html
