【微信小程序】tab选项卡

互联网 2021/4/7 22:08:33

<view class="tabs"><view class="tabNav"><view class="{{currentTab==index ? cur : }}" wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab">…

<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;
}


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【微信小程序】tab选项卡]http://www.zyiz.net/tech/detail-153530.html

上一篇:【uni-app/微信小程序】预览图片(单张、多张)uni.previewImage()

下一篇:【微信小程序】swiper轮播图

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程