bug

nova-werun/pages/home/sport/sport-home/index.js

@@ -14,7 +14,7 @@ Page({
         contentHeight2: 0,
         contentpadding: 0, //顶部padding高度
         //
-        active: 0,
+        currentTab: 0,
         //地图
         longitude: 0,
         latitude: 0,
@@ -181,4 +181,11 @@ Page({
         }
 
     },
+    switchTab (e) {
+        const index = e.currentTarget.dataset.index;
+        this.setData({
+          currentTab: index
+        });
+        console.log(this.data.currentTab);
+      },
 })

nova-werun/pages/home/sport/sport-home/index.less

@@ -4,11 +4,39 @@
     padding-left: 40rpx;
     padding-right: 40rpx;
     padding-top: 20rpx;
-    background-color: #84b4f1; 
-    .tab{
-        font-size: 40rpx;
-        background-color: #84b4f1;
-    }
+    background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
+    .tab-bar {
+        display: flex;
+        justify-content: space-around;
+      }
+      
+      .tab-item {
+        padding: 10rpx 0;
+        text-align: center;
+        position: relative;
+        color: black;
+        font-size: 32rpx;
+      }
+      
+      .tab-item.active {
+        position: relative;
+        color: #0178EE;
+        font-size: 32rpx;
+        font-family: 'NotoSans-Bold-5', sans-serif;
+      }
+      
+      .tab-item.active::after {
+        content: "";
+        width: 64rpx;
+        position: absolute;
+        left: calc(50% - 32rpx); 
+        right: calc(50% - 32rpx); 
+        bottom: 0;
+        height: 2rpx;
+        background-color: #0178EE;
+        border-radius: 4rpx;
+        
+      }
     .textbox{
         width: 100%;
         height: 80rpx;

nova-werun/pages/home/sport/sport-home/index.wxml

@@ -1,9 +1,16 @@
 <!--nova-werun/pages/home/sport/sport-home/index.wxml-->
 <nav type="back" title="运动" background-color="{{'#4F9AF7'}}" front-color="{{'#333333'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="tab-bar">
+        <view style="margin-left: 66rpx;" class="tab-item {{currentTab == 0? 'active' : ''}}" bindtap="switchTab" data-index="0">
+            步行
+        </view>
+        <view style="margin-left: 44rpx;" class="tab-item {{currentTab == 1? 'active' : ''}}" bindtap="switchTab" data-index="1">
+            跑步
+        </view>
+    </view>
     <!-- 走路 -->
-    <van-tabs tab-class='tab' active="{{ active }}" color='#0178EE' title-active-color='#0178EE' title-inactive-color='black'>
-        <van-tab title="步行">
+    <view wx:if="{{currentTab == 0}}">
             <view class="textbox">
                 <view class="text">今日积累行走</view>
                 <view class="number" data-url="../../statistics/index"  bindtap="gourl">7公里 ></view>
@@ -14,9 +21,9 @@
                 </view>
                 <view class="button" data-url="../sport-start/index"  bindtap="gourl">GO</view>
             </view>
-        </van-tab>
-        <!-- 跑步 -->
-        <van-tab title="跑步">
+    </view>
+    <!-- 跑步 -->
+    <view wx:if="{{currentTab == 1}}">
             <view class="textbox">
                 <view class="text">今日积累跑步</view>
                 <view class="number" data-url="../../statistics/index"  bindtap="gourl">10公里 ></view>
@@ -27,6 +34,5 @@
                 </view>
                 <view class="button" data-url="../sport-start/index"  bindtap="gourl">GO</view>
             </view>
-        </van-tab>
-    </van-tabs>
+    </view>
 </view>

nova-werun/pages/home/sport/sport-home/index.wxss

@@ -1 +1 @@
-.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx;background-color:#84b4f1}.all .tab{font-size:40rpx;background-color:#84b4f1}.all .textbox{width:100%;height:80rpx;border-radius:40rpx;border:solid black 1px;display:flex;align-items:center;margin-top:40rpx;background-color:white}.all .textbox .text{font-size:30rpx;margin-left:20rpx}.all .textbox .number{font-size:32rpx;margin-left:auto;margin-right:20rpx}.all .mapbox{width:100%;height:1100rpx;border-radius:15rpx;position:relative;margin-top:30rpx;margin-bottom:40rpx}.all .mapbox .map{width:100%;height:100%;border-radius:15rpx;overflow:hidden}.all .mapbox .button{width:150rpx;height:150rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40rpx;background-color:#4F9AF7;color:white;position:absolute;left:38%;bottom:100rpx}
+.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx;background:linear-gradient(to bottom, #4F9AF7, #FFFFFF)}.all .tab-bar{display:flex;justify-content:space-around}.all .tab-item{padding:10rpx 0;text-align:center;position:relative;color:black;font-size:32rpx}.all .tab-item.active{position:relative;color:#0178EE;font-size:32rpx;font-family:'NotoSans-Bold-5',sans-serif}.all .tab-item.active::after{content:"";width:64rpx;position:absolute;left:calc(50% - 32rpx);right:calc(50% - 32rpx);bottom:0;height:2rpx;background-color:#0178EE;border-radius:4rpx}.all .textbox{width:100%;height:80rpx;border-radius:40rpx;border:solid black 1px;display:flex;align-items:center;margin-top:40rpx;background-color:white}.all .textbox .text{font-size:30rpx;margin-left:20rpx}.all .textbox .number{font-size:32rpx;margin-left:auto;margin-right:20rpx}.all .mapbox{width:100%;height:1100rpx;border-radius:15rpx;position:relative;margin-top:30rpx;margin-bottom:40rpx}.all .mapbox .map{width:100%;height:100%;border-radius:15rpx;overflow:hidden}.all .mapbox .button{width:150rpx;height:150rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40rpx;background-color:#4F9AF7;color:white;position:absolute;left:38%;bottom:100rpx}