小程序——Tab切换

爱被打了一巴掌 2021-09-30 08:52 359阅读 0赞

<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 class="{
         {selected2?'red':'default'}}" bindtap="selected2">123</view>
      </view>
      <view class="{
         {selected?'show':'hidden'}}">for system</view>
      <view class="{
         {selected1?'show':'hidden'}}">for activity</view>
      <view class="{
         {selected2?'show':'hidden'}}">for activsadity</view>
    </view>

WSS

page {
      background-color: rgb(243,243,243);
    }
    
    .nav {
      width: 100%;
      height: 80rpx;
      display: flex;
      flex-direction: row;
      background: #fff;
      justify-content: space-around;
    }
    
    .nav view {
      width: 180rpx;
      text-align: center;
    }
    
    .default {
      line-height: 80rpx;
      text-align: center;
      color: #000;
      font-weight: bold;
      font-size: 30rpx;
    }
    
    .red {
      line-height: 80rpx;
      text-align: center;
      color: rgb(0, 192, 10);
      font-weight: bold;
      font-size: 30rpx;
      border-bottom: 4rpx solid rgb(0, 192, 10);
    }
    
    .show {
      display: block;
      text-align: center;
    }
    
    .hidden {
      display: none;
      text-align: center;
    }

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

转载于:https://www.cnblogs.com/wangshishuai/p/9844543.html