博客

wxml

<!-- 选项卡 -->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabs}}" wx:key="id" class="title_item {{currentindex == index? 'active':''}} " bindtap="handleItemtap"
            data-index='{{index}}'>
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content" >
    <view hidden="{{currentindex !=0}}" class="content_item">内容1</view>
    <view hidden="{{currentindex !=1}}" class="content_item">内容2</view>
    <view hidden="{{currentindex !=2}}" class="content_item">内容3</view>
    <view hidden="{{currentindex !=3}}" class="content_item">内容4</view>
    </view>
</view>

wxss

.tabs .tabs_title {
  width: 100%;
  padding: 10rpx;
  display: flex;
}
.tabs .tabs_title .title_item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.tabs .tabs_title .active {
  color: red;
  border-bottom: 10rpx solid red;
}
.tabs .tabs_content {
  padding: 20px;
}

js

Page({
  data: {
    tabs: [{
        id: 0,
        name: '首页',
      },
      {
        id: 1,
        name: '原创',
      },
      {
        id: 2,
        name: '分类',
      },
      {
        id: 3,
        name: '关于',
      }
    ],
    currentindex: 0
  },
  handleItemtap(e) {
    console.log(e);
    this.setData({
      currentindex: e.currentTarget.dataset.index
    })
  }
})

效果图