微信小程序开发--3.3导航栏点击样式变动

小沐°

已于 2023-07-17 11:37:38 修改

阅读量175

点赞数

分类专栏：微信小程序文章标签：微信小程序 notepad++ 小程序

于 2023-07-12 21:09:22 首次发布

本文链接：https://blog.csdn.net/weixin_46479909/article/details/131690230

版权

微信小程序专栏收录该内容

30 篇文章 1 订阅

订阅专栏

效果

1.TabCur下方样式变化

2.主体内容变化

wxml

<view style="width:100%;min-height:{{mainPageHeight}}px;background-color:#fff;margin-top:-4rpx;">
<scroll-view scroll-x class="nav" scroll-with-animation scroll-left="{{scrollLeft}}" style="color:#C5CBED;font-size:28rpx;font-family:'Noto Sans SC';font-weight:bold;height:70rpx;margin-left:34rpx;width:682rpx;border-bottom:4rpx solid #F2F4FF">
  <view class="cu-item {{index==TabCur?'text-bold cur':''}}" wx:for="{{TabTitle}}" wx:key bindtap="tabSelect" data-id="{{index}}" style="height:66rpx;line-height: 66rpx;margin:0;">
    {{item}}
  </view>
</scroll-view>
<!-- 全部 -->
<view wx:if="{{TabCur==0}}" style="width:100%;">
  
</view>
<!-- 积分累计情况 -->
<view wx:if="{{TabCur==1}}" style="width:100%;">
 
</view>
<!-- 积分消费情况 -->
<view wx:if="{{TabCur==2}}" style="width:100%;">
  
</view>
</view>

wxss

.nav .cu-item.cur {
    border:4rpx solid #5253B9 !important;
    border-color:#5253B9 !important;
}
.text-bold {
    color:#A5AEDF;
}

Page({
    /**
     * 页面的初始数据
     */
    data: { 
      TabCur: 0,
      scrollLeft:0,
      TabTitle : ["全部", "积分累计情况", "积分消费情况"],
  },

  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id-1)*60
    })
  }
})