小程序tab切换

Page({
  data: {
    tab: [{text:'已上架',id:1},{text:'未上架',id:2},{text:'已出售',id:3}],
    current:1,
  },
  changeTab(e) {
    console.log(e)
    const id = e.currentTarget.dataset.id
    this.setData({
      current: id,
    })
  //  this.getData()//页面切换数据
  }
})

页面切换内容可根据current进行显示隐藏

<view class="index_tab">
  <view wx:for='{{tab}}' wx:key='tab' bindtap="changeTab" data-id="{{item.id}}">
    <text class="index_tabText {{current == item.id?'active':''}}">{{item.text}}</text>
  </view>
</view>

.index_tab {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #eae8e9;
  position: -webkit-sticky;
  position: sticky;
  top: 0rpx;
  background: #fff;
  z-index: 100;
  height: 70rpx;
  align-items: center;
}
.index_tab > view {
  flex: 1;
  text-align: center;
}
.index_tabText {
  display: inline-flex;
  line-height: 70rpx;
}
.active {
  color: #008ac5;
  border-bottom: 1rpx solid #008ac5;
  padding: 0 30rpx;
}