index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view v-show="showPage != 'my'">
  3. <home />
  4. </view>
  5. <view v-show="showPage != 'home'">
  6. <my />
  7. </view>
  8. <up-tabbar :fixed="true" :value="showPage" @change="change1">
  9. <up-tabbar-item text="服务" name="home">
  10. <template #active-icon>
  11. <view class="iconfont icon-zhuye-weixuanzhong" style="color: #1965E7;" />
  12. </template>
  13. <template #inactive-icon>
  14. <view class="iconfont icon-zhuye-weixuanzhong" />
  15. </template>
  16. </up-tabbar-item>
  17. <up-tabbar-item text="我的" name="my">
  18. <template #active-icon>
  19. <view class="iconfont icon-wode-weixuanzhong" style="color: #1965E7;" />
  20. </template>
  21. <template #inactive-icon>
  22. <view class="iconfont icon-wode-weixuanzhong" />
  23. </template>
  24. </up-tabbar-item>
  25. </up-tabbar>
  26. </template>
  27. <script setup>
  28. import home from './home.vue';
  29. import my from './my.vue';
  30. import { ref, getCurrentInstance } from 'vue'
  31. const { $Http } = getCurrentInstance().proxy;
  32. const showPage = ref('home');
  33. function change1(value) {
  34. showPage.value = value;
  35. console.log('change1', value);
  36. }
  37. </script>
  38. <style></style>