本文主要为大家详细介绍了微信小程序实现tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
微信小程序之tab切换效果，如图：
最近在学习微信小程序并把之前的公司app搬到小程序上，挑一些实现效果记录一下（主要是官方文档里没说的，毕竟官方文档只是介绍功能）
.wxml代码：
<view> <view> <view>系统提醒</view> <view>优惠活动</view> </view> <view>for system</view> <view>for activity</view></view>
登录后复制
.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切换效果实例分享的详细内容，更多请关注米云其它相关文章！
