微信小程序实现tab切换效果实例分享

微信小程序之tab切换效果，如图：

<view class="body">   <view class="nav bc_white">    <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>    <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>   </view>   <view class="{{selected?'show':'hidden'}}">for system</view>   <view class="{{selected1?'show':'hidden'}}">for activity</view>  </view>

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

Page({    data:{      selected:true,      selected1:false      },    selected:function(e){      this.setData({        selected1:false,        selected:true      })    },    selected1:function(e){      this.setData({        selected:false,        selected1:true      })    }  })

实例详解vue仿淘宝订单状态的tab切换效果

js中常用的Tab切换效果

jquery图片上下tab切换效果_jquery

以上就是微信小程序实现tab切换效果实例分享的详细内容，更多内容请关注技术你好其它相关文章！