【微信小程序】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;}


©著作权归作者所有:来自51CTO博客作者wx605879fdc8dae的原创作品,如需转载,请注明出处,否则将追究法律责任