页面

zxl

6 天以前 4c990c71b78a4dc817db706067aed2369dbe6ac3

 components/TopBar.vue

@@ -1,5 +1,5 @@
<template>
   <view class="top-bar" :style="{paddingTop: statusBarHeight + 'px'}">
   <view class="top-bar" :style="{paddingTop: statusBarHeight + 'px', backgroundColor: bgColor}" :class="{'has-bg': bgColor !== 'transparent'}">
      <view class="top-bar-content">
         <!-- 标题列表 -->
         <scroll-view class="title-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
@@ -8,10 +8,11 @@
                  v-for="(item, index) in titleList" 
                  :key="index"
                  :class="{active: selectedTitleIndex === item.index, 'title-item': true}"
                  :style="{color: textColor}"
                  @click="changeTab(item)"
               >
                  <text>{{item.title}}</text>
                  <view class="underline" v-if="selectedTitleIndex === item.index"></view>
                  <view class="underline" :style="{backgroundColor: textColor}" v-if="selectedTitleIndex === item.index"></view>
               </view>
            </view>
         </scroll-view>
@@ -26,6 +27,14 @@
         selectedTitleIndex: {
            type: String,
            default: 'home'
         },
         textColor: {
            type: String,
            default: 'white'
         },
         bgColor: {
            type: String,
            default: 'transparent'
         }
      },
      data() {
@@ -34,9 +43,14 @@
            scrollLeft: 0,
            titleList: [
               {
                  index: 'home',
                  index: 'home1',
                  pagePath: '/pages/tabbar/index/home',
                  title: '推荐'
               },
               {
                  index: 'kitchenCustomize',
                  pagePath: '/pages/kitchen/KitchenCustomize',
                  title: '私厨定制'
               },
               {
                  index: 'shop',
@@ -48,11 +62,11 @@
                  pagePath: '/pages/mine/activity/reportActivity',
                  title: '活动'
               },
               {
                  index: 'health',
                  pagePath: '/pages/health/healthVideo',
                  title: '大健康'
               }
               // {
               //    index: 'health',
               //    pagePath: '/pages/health/healthVideo',
               //    title: '大健康'
               // }
            ]
         };
      },
@@ -94,6 +108,10 @@
         right: 0;
         z-index: 999;
      }

      .top-bar.has-bg {
         box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      }
      
      .top-bar .top-bar-content {
         box-sizing: border-box;
@@ -103,7 +121,7 @@
      
      .top-bar .title-scroll {
         width: 100%;
         height: 80rpx;
         height: 40px;
         white-space: nowrap;
      }
      
@@ -117,7 +135,7 @@
         position: relative;
         padding: 0 24rpx;
         font-size: 32rpx;
         color: white;
         /* color: white; */
         height: 100%;
         display: flex;
         align-items: center;
@@ -136,7 +154,7 @@
         transform: translateX(-50%);
         width: calc(100% - 76rpx);
         height: 4rpx;
         background-color: white;
         /* background-color: white; */
         border-radius: 4rpx;
      }
</style>
</style>