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>
    <!-- 商城 -->
    <tpl ref="tpl" v-if="currentTabIndex == 1" :ste="1" />
    <!-- 本地生活 -->
    <tpl ref="tpl" v-if="currentTabIndex == 0" :ste="0" />

  </div>
</template>
<script>
import tpl from "@/pages/tabbar/home/views.vue";

export default {
  data() {
    return {
      background: {
        backgroundColor: "#fff",
      },
      list1: [
        {
          name: "本地生活",
        },
        {
          name: "商城",
        },
      ],
      currentTabIndex: 0,
    };
  },
  components: {
    tpl,
  },
  methods: {
    click(item) {
      this.currentTabIndex = this.list1.indexOf(item);
    },
  },
  onPullDownRefresh() {
    this.$refs.tpl.init();
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss" scoped>
.tab-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  // background-color: #f0f0f0;
  // padding: 0 16rpx 0 0;
  font-size: 18px;
}
.tab-container div {
  cursor: pointer;
  padding: 5px 10px;
}
.tab-container div.active {
  border-bottom: 2px solid #F50505;
  color:#F50505;
  background-color: transparent;
}
.wrapper {
  // background: red;
}
.navbar{
  height: 100%;
}

</style>