tabbar增加视频发布

xiangpei

2025-05-15 b37dec20be1844a9210fb009a44a450c9f45857d

tabbar增加视频发布

 components/custom-tabbar.vue

@@ -5,13 +5,13 @@
      v-for="(item, index) in list" 
      :key="index"
      class="tabbar-item"
      @click="switchTab(item, index)"
      @click="switchTab(item)"
    >
      <image 
        :src="selected === index ? item.selectedIconPath : item.iconPath" 
        class="tabbar-icon"
        :src="selected === item.key ? item.selectedIconPath : item.iconPath" 
        :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}"
      />
      <text class="tabbar-text" :style="{color: selected === index ? selectedTextColor : color}">
      <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}">
        {{item.text}}
      </text>
    </view>
@@ -23,8 +23,8 @@
  name: "CustomTabbar",
  props: {
    selected: {
      type: Number,
      default: 0
      type: String,
      default: 'index'
    },
    bgColor: {
      type: String,
@@ -43,34 +43,43 @@
                "pagePath": "/pages/tabbar/index/home",
                "iconPath": "/static/tabbar/home.png",
                "selectedIconPath": "/static/tabbar/home-s.png",
                "text": "首页"
                "text": "首页",
                "key": 'index'
            },
            {
                "pagePath": "/pages/tabbar/category/category",
                "iconPath": "/static/tabbar/category.png",
                "selectedIconPath": "/static/tabbar/category-s.png",
                "text": "分类"
                "text": "商城",
                "key": 'shop'
            },
        
            {
                "pagePath": "/pages/tabbar/video/video",
                "iconPath": "/static/tabbar/video.png",
                "selectedIconPath": "/static/tabbar/video-selected.png",
                "key": 'video'
            },
            {
                "pagePath": "/pages/tabbar/cart/cartList",
                "iconPath": "/static/tabbar/cart.png",
                "selectedIconPath": "/static/tabbar/cart-s.png",
                "text": "购物车"
                "text": "购物车",
                "key": 'buyCar'
            },
            {
                "pagePath": "/pages/tabbar/user/my",
                "iconPath": "/static/tabbar/mine.png",
                "selectedIconPath": "/static/tabbar/mine-s.png",
                "text": "我的"
                "text": "我的",
                "key": 'my'
            }
      ]
    }
  },
  methods: {
    switchTab(item, index) {
        console.log("执行力", item, index);
      if (this.selected === index) return;
    switchTab(item) {
        console.log("执行力", item);
      if (this.selected === item.key) return;
      uni.switchTab({
        url: item.pagePath
      });
@@ -99,7 +108,10 @@
  align-items: center;
  justify-content: center;
}

.video-add {
  width: 30px !important;
  height: 30px !important;
}
.tabbar-icon {
  width: 24px;
  height: 24px;

 pages.json

@@ -101,6 +101,14 @@
                    "style": {
                            "navigationBarTitleText": "专题"
                    }
        },
        {
            "path" : "pages/tabbar/video/video",
            "style" : 
            {
                "navigationBarTitleText" : "发布视频",
                "enablePullDownRefresh" : false
            }
        }


@@ -845,9 +853,13 @@
                "pagePath": "pages/tabbar/category/category",
                "iconPath": "static/tabbar/category.png",
                "selectedIconPath": "static/tabbar/category-s.png",
                "text": "分类"
                "text": "商城"
            },
		
            {
                "pagePath": "pages/tabbar/video/video",
                "iconPath": "static/tabbar/video.png",
                "selectedIconPath": "static/tabbar/video-selected.png"
            },
            {
                "pagePath": "pages/tabbar/cart/cartList",
                "iconPath": "static/tabbar/cart.png",

 pages/tabbar/cart/cartList.vue

@@ -175,7 +175,7 @@
      </view>
    </div>
    <u-toast ref="uToast" />
    <custom-tabbar bgColor="#ffffff" :selected="2"></custom-tabbar>
    <custom-tabbar bgColor="#ffffff" selected="buyCar"></custom-tabbar>
  </view>
</template>
<script>

 pages/tabbar/category/category.vue

@@ -36,7 +36,7 @@
        </view>
      </scroll-view>
    </view>
    <custom-tabbar bgColor="#ffffff" :selected="1"></custom-tabbar>
    <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar>
  </view>
</template>


 pages/tabbar/index/home.vue

@@ -81,7 +81,7 @@
        </view>
      </swiper-item>
    </swiper>
    <custom-tabbar bgColor="#333333" :selected="0" selectedTextColor="#ffffff"></custom-tabbar>
    <custom-tabbar bgColor="#333333" selected="index" selectedTextColor="#ffffff"></custom-tabbar>
  </view>
</template>


 pages/tabbar/user/my.vue

@@ -71,7 +71,7 @@
    <!-- 常用工具 -->

    <tool />
  <custom-tabbar bgColor="#ffffff" :selected="3"></custom-tabbar>
  <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
  </view>
</template>
<script>

 pages/tabbar/video/video.vue

New file
@@ -0,0 +1,22 @@
<template>
    <view>
        <custom-tabbar bgColor="#ffffff" selected="video"></custom-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
</script>

<style>

</style>

 static/tabbar/video-selected.png

 static/tabbar/video.png