app/pages/tabbar/home/index.vue

<template>
  <div class="wrapper">
    <!-- 楼层装修组件 -->
    <!-- <u-navbar class="navbar" :is-back="false" :is-fixed="false">
      <div class="tab-container">
        <div
          v-for="(item, index) in list1"
          :key="index"
          :class="{ active: currentTabIndex === index }"
          @click="click(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </u-navbar> -->
    <!-- <u-tabs-swiper ref="tabs" :list="list" :is-scroll="true" current="0"></u-tabs-swiper> -->
    <u-tabs
      name="cate_name"
      count="cate_count"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <!-- 商城 -->
    <tpl ref="tpl" v-if="currentTabIndex == 1" :ste="1" />
    <!-- 本地生活 -->
    <tpl ref="childComp" v-if="currentTabIndex == 0" :ste="0" />
  </div>
</template>
<script>
import tpl from "@/pages/tabbar/home/views.vue";
import Views from "./views.vue";
export default {
  data() {
    return {
      list: [
        {
          name: "本地生活",
        },
        {
          name: "商城",
        },
      ],
      current: 0,

      background: {
        backgroundColor: "#fff",
      },
      list1: [
        {
          name: "本地生活",
        },
        {
          name: "商城",
        },
      ],
      currentTabIndex: 0,
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
    };
  },

  components: {
    tpl,
  },
  onReachBottom() {
    console.log("触底了");
    this.$refs.childComp.loadMon();
  },
  methods: {
    change(index) {
      this.current = index;
      this.currentTabIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-container div.active {
  border-bottom: 2px solid #f50505;
  color: #f50505;
  background-color: transparent;
}
.wrapper {
  // background: red;
}
.navbar {
  height: 100%;
}
::v-deep {
  .u-tabs {
    padding: 25px 20px 0px 20px;
  }
  .u-tab-item {
    color: $main-color !important;
  }
  .u-tab-bar {
    background-color: $light-color !important;
  }
}
</style>