自定义顶部组件、顶部tab对应页面接入该组件

xiangpei

2025-06-25 df4dd9f030ac4e830d93f2f64e2379a9b7dad278

 pages/commodity-square/commoditySquare.vue

@@ -1,5 +1,6 @@
<template>
   <view class="container">
      <top-bar selectedTitleIndex="shop" @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>
@@ -60,11 +61,11 @@
      </view>
      <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
         没有更多数据了.................</view>
      <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar>
   </view>
</template>

<script>
   import TopBar from "@/components/TopBar.vue";
   import {
      getCategoryList,
      getGoodsList
@@ -73,6 +74,7 @@
      getSTSToken
   } from '@/api/common.js'
   export default {
      components: {TopBar},
      data() {
         return {
            //记录两列高度
@@ -104,6 +106,17 @@
         }
      },
      methods: {
         topBarChange(titleObj) {
            if (titleObj.index === 'home') {
               uni.switchTab({
                  url: titleObj.pagePath
               });
            } else {
               uni.redirectTo({
                  url: titleObj.pagePath
               });
            }
         },
         async searchGoods(keyWard) {
            this.getGoodsParam.keyword = keyWard
            this.getGoodsParam.pageNumber = 1
@@ -393,4 +406,10 @@
      color: red;
      font-weight: bold;
   }
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000
   }
</style>