【微信小程序】tab選項卡

<view class="tabs">
    <view class="tabNav">
        <view class="{{currentTab==index ? 'cur' : ''}}" wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab">
            <text>{{item}}</text>
        </view>
    </view>
    <view class="tabCont">
        <view class="tabItem" wx:if="{{currentTab==0}}">
            <view class="noCont">
                <image src="/images/noContent.png" mode="widthFix" />
                <text>內有內容1</text>
                <navigator url="" hover-class="className">看看推薦</navigator>
            </view>
        </view>

            <view class="tabItem" wx:if="{{currentTab==1}}">
            <view class="noCont">
                <image src="/images/noContent.png" mode="widthFix" />
                <text>內有內容2</text>
                <navigator url="" hover-class="className">看看推薦</navigator>
            </view>
        </view>

            <view class="tabItem" wx:if="{{currentTab==2}}">
            <view class="noCont">
                <image src="/images/noContent.png" mode="widthFix" />
                <text>內有內容3</text>
                <navigator url="" hover-class="className">看看推薦</navigator>
            </view>
        </view>

            <view class="tabItem" wx:if="{{currentTab==3}}">
            <view class="noCont">
                <image src="/images/noContent.png" mode="widthFix" />
                <text>內有內容4</text>
                <navigator url="" hover-class="className">看看推薦</navigator>
            </view>
        </view>

    </view>
</view>

data: {
  currentTab:0,
  navTab: ['個人收藏','個人已購','收聽歷史', '個人禮包']
},
currentTab:function(e){
  // console.log(e.currentTarget.dataset.idx);

  this.setData({
    currentTab: e.currentTarget.dataset.idx
  })

},

.tabs .tabNav {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  margin-top: 40rpx;
}
.tabs .tabNav > view {
  text-align: center;
  color: #666;
}
.tabs .tabNav > view:last-child {
  margin-right: 0;
}
.tabs .tabNav > view text {
  height: 80rpx;
  display: inline-block;
  position: relative;
}
.tabs .tabNav .cur text {
  color: #000;
  font-weight: bold;
}
.tabs .tabNav .cur text::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50rpx;
  height: 6rpx;
  background: #ff4b1c;
  border-radius: 8rpx;
}
.tabs .tabCont .tabItem .noCont {
  margin-top: 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabs .tabCont .tabItem .noCont image {
  width: 70%;
  margin-bottom: 30rpx;
}
.tabs .tabCont .tabItem .noCont text {
  color: #999;
  display: block;
  margin-bottom: 25rpx;
}
.tabs .tabCont .tabItem .noCont navigator {
  color: #666;
  background: #f7f7f7;
  width: 250rpx;
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  border-radius: 80rpx;
}