自定义顶部组件优化

xiangpei

2025-06-25 36e794d948b856f2a542aaadd0e374892635be14

自定义顶部组件优化

 components/TopBar.vue

@@ -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,10 @@
            selectedTitleIndex: {
                type: String,
                default: 'home'
            },
            textColor: {
                type: String,
                default: 'white'
            }
        },
        data() {
@@ -117,7 +122,7 @@
            position: relative;
            padding: 0 24rpx;
            font-size: 32rpx;
            color: white;
            /* color: white; */
            height: 100%;
            display: flex;
            align-items: center;
@@ -136,7 +141,7 @@
            transform: translateX(-50%);
            width: calc(100% - 76rpx);
            height: 4rpx;
            background-color: white;
            /* background-color: white; */
            border-radius: 4rpx;
        }
</style>

 components/custom-tabbar.vue

@@ -48,12 +48,12 @@
            },
            {
                // "pagePath": "/pages/tabbar/category/category",
                "pagePath": "/pages/commodity-square/commoditySquare",
                "pagePath": "/pages/kitchen/KitchenVideo",
                
                "iconPath": "/static/tabbar/category.png",
                "selectedIconPath": "/static/tabbar/category-s.png",
                "text": "商城",
                "key": 'shop'
                "text": "神厨",
                "key": 'kitchen'
            },
            {
                "pagePath": "/pages/tabbar/video/video",

 pages.json

@@ -36,6 +36,13 @@
            }
        },
        {
            "path": "pages/kitchen/KitchenVideo",
            "style": {
                "navigationBarTitleText": "神厨",
                "navigationStyle": "custom" // 隐藏系统导航栏
            }
        },
        {
            "path": "pages/tabbar/home/title",
            "style": {
                "navigationBarTitleText": "消息"
@@ -65,7 +72,7 @@
        {
            // "path": "pages/tabbar/category/category",
            "path": "pages/commodity-square/commoditySquare",

		
            "style": {
                "navigationBarTitleText": "商品广场",
                "navigationStyle": "custom", // 隐藏系统导航栏
@@ -988,7 +995,7 @@
                },
                {
                    "path" : "video-goods-detail",
                    "style" :
                    "style" : 
                    {
                        "navigationBarTitleText" : "视频推荐商品",
                        "componentPlaceholder": {
@@ -1440,27 +1447,7 @@
                    "navigationStyle": "custom"
                }
            }]
        },
        {
            "root": "pages/kitchen",
            "pages": [{
                "path": "KitchenVideo",
                "style": {
                    "navigationBarTitleText": "厨神"
                }
            }]
        },
        {
            "root": "pages/supplier",
            "pages": [{
                "path" : "suppler-order/suppler-order",
                "style" :
                {
                    "navigationBarTitleText" : ""
                }
            }]
        }

        // ,
        // {
        //     "root": "pages/commodity-square",
@@ -1498,13 +1485,13 @@
                "selectedIconPath": "static/tabbar/home-s.png",
                "text": "首页"
            },
            // {
            //     // "pagePath": "pages/tabbar/category/category",
            //     "pagePath": "pages/commodity-square/commoditySquare",
            //     "iconPath": "static/tabbar/category.png",
            //     "selectedIconPath": "static/tabbar/category-s.png",
            //     "text": "商城"
            // },
            {
                // "pagePath": "pages/tabbar/category/category",
                "pagePath": "pages/kitchen/KitchenVideo",
                "iconPath": "static/tabbar/category.png",
                "selectedIconPath": "static/tabbar/category-s.png",
                "text": "神厨"
            },
            {
                "pagePath": "pages/tabbar/video/video",
                "iconPath": "static/tabbar/video.png",
@@ -1524,11 +1511,11 @@
            }
        ]
    },
    // #todo 为什么要注释condition下代码？
    // #todo 为什么要注释condition下代码？ 
    // IOS plus.runtime.arguments 添加 condition节点后， 框架会修改 runtime.arguments
    // 会影响什么功能？
    //    -在h5中唤醒app会一直返回默认值 {"name":"","path":"","query":"","id":0}
    "condition": { //模式配置，仅开发期间生效
    "condition": { //模式配置，仅开发期间生效   
        // "current": 0, //当前激活的模式(list 的索引项)
        // "list": [{
        //     "name": "", //模式名称
@@ -1536,4 +1523,4 @@
        //     "query": "" //启动参数，在页面的onLoad函数里面得到
        // }]
    }
}
}

 pages/commodity-square/commoditySquare.vue

@@ -1,6 +1,6 @@
<template>
    <view class="container">
        <top-bar selectedTitleIndex="shop" @changeTab="topBarChange" class="topBar"></top-bar>
        <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
        <input type="text" v-show="false" v-model="flushDom" />
        <view class="search">
            <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
@@ -49,7 +49,7 @@
            <view class="openShowLeft" @click="showDrawer('showLeft')" v-if="!showLeft">
                <uni-icons type="right" size="30"></uni-icons>
            </view>
            <uni-drawer ref="showLeft" mode="left" width="120" height="94vh" @change="change($event,'showLeft')"
            <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" @change="change($event,'showLeft')"
                :cus-style="true" class="navigationLeft">
                <scroll-view class="typeNavigation" :scroll-y="true" show-scrollbar="false">
                    <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
@@ -303,7 +303,7 @@

    .openShowLeft {
        position: fixed;
        top: 120rpx;
        top: 200rpx;
        left: 0;
        align-items: center;
        justify-content: flex-start;

 pages/health/healthVideo.vue

@@ -1,6 +1,6 @@
<template>
  <view class="video-container">
    <top-bar selectedTitleIndex="health" @changeTab="topBarChange" class="topBar"></top-bar>
    <top-bar selectedTitleIndex="health" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
    <!-- 视频加载 -->
    <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
    <!-- 视频列表 -->
@@ -250,6 +250,7 @@
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
export default {
  components: {TopBar},
  computed: {
        hasPlayTime() {
          return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -381,6 +382,17 @@
      }
  },
  methods: {
      topBarChange(titleObj) {
          if (titleObj.index === 'home') {
              uni.switchTab({
                  url: titleObj.pagePath
              });
          } else {
              uni.redirectTo({
                  url: titleObj.pagePath
              });
          }
      },
      // 静默登录
      wxSilentLogin(callback) {
          //获取code

 pages/kitchen/KitchenVideo.vue

@@ -247,6 +247,8 @@
      </scroll-view>
    </uni-drawer>
    <view v-if="videoList.length===0"  style="display: flex;align-items: center;justify-content: center;background-color: #fff;height: 100%">当前没有可以查看的视频</view>
	
    <custom-tabbar bgColor="#ffffff" selected="kitchen"></custom-tabbar>
  </view>
</template>


 pages/mine/activity/reportActivity.vue

@@ -1,6 +1,6 @@
<template>
    <view class="wrapper">
        <top-bar selectedTitleIndex="activity" @changeTab="topBarChange" class="topBar"></top-bar>
        <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>

        <view style="height: 100rpx"></view>
        <!-- 内容区域 -->

 pages/tabbar/index/home.vue

@@ -1,6 +1,6 @@
<template>
  <view class="video-container">
    <top-bar selectedTitleIndex="home" @changeTab="topBarChange" class="topBar"></top-bar>
    <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
    <!-- 视频加载 -->
    <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
    <!-- 视频列表 -->

 uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue

@@ -154,6 +154,7 @@
    }
    .custom-style{
        border-radius: 0 24rpx 24rpx 0;
        top: 100px;
    }

    .uni-drawer--left {