【微信小程序】tab选项卡

2021/4/7 22:08:33

本文主要是介绍【微信小程序】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;
}




这篇关于【微信小程序】tab选项卡的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程