微信小程序 - 原生Tab 标签页切换（轮子）

太过爱你忘了你带给我的痛 2022-11-24 12:57 642阅读 0赞

## 效果图 ##

可根据需求来修改样式或封装成组件。  
![在这里插入图片描述][20200806104753176.gif]

## wxml ##

<view class="nav_title">
      <view class="nav_tab">
      
        <view wx:for="{ {list}}" wx:key="list" class="{ {selected==index?'active':'common'}}" data-index='{ {index}}' bindtap="selected">
        {
       {item}}
         
          <view class="{ {selected==index?'nav_underline':''}}"></view>
        </view>
      </view>
      
      <view wx:if="{ {selected == 0}}">内容1</view>
    
      
      <view wx:if="{ {selected == 1}}">内容2</view>
      
      <view wx:if="{ {selected == 2}}">内容3</view>
    </view>

## wxss ##

/* 页面背景色 */
    page { 
      background: rgba(247, 247, 247, 1);
    }
    
    .nav_tab { 
      width: 702rpx;
      margin: 20rpx auto;
      height: 100rpx;
      display: flex;
      background: #fff;
      border-radius: 10rpx;
      flex-direction: row;
    }
    /* 未选中的样式 */
    .common { 
      line-height: 100rpx;
      text-align: center;
      flex: 1;
      color: #333;
      font-size: 28rpx;
      opacity: 0.5;
    }
    /* 选中时的样式 */
    .active { 
      line-height: 100rpx;
      text-align: center;
      color: #ef9ba8;
      flex: 1;
      font-size: 28rpx;
    }
    /* 下划线的样式 */
    .nav_underline { 
      background: #ef9ba8;
      width: 54rpx;
      height: 6rpx;
      margin-top: -10rpx;
      margin-left: 70rpx;
      border-radius: 8rpx;
    }

## js ##

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        selected: 0,
        list: ['Tab1', 'Tab2', 'Tab3'],
      },
      //tab框
      selected: function (e) { 
        let that = this
        //console.log(e)
        let index = e.currentTarget.dataset.index
        //console.log("index",index)
        if (index == 0) { 
          that.setData({ 
            selected: 0
          })
        } else if (index == 1) { 
          that.setData({ 
            selected: 1
          })
        } else { 
          that.setData({ 
            selected: 2
          })
        } 
      }

[20200806104753176.gif]: /images/20221124/c84dfd4167434ebf9efee79f73908370.png