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

效果

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

js

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

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