Question

我不确定我是否做错了什么，但据我了解，本代码应切换“底部导航”选项卡上的选项卡

<template>
  <Page>
    <GridLayout rows="*, auto">
      <StackLayout class="page" backgroundColor="white" row="0">
        <Frame v-if="currentTab === 0">
          <Overview />
        </Frame>
        <GridLayout class="p-20" v-if="currentTab === 0">
          <Label
            class="h1 text-center"
            text="First tab"
            textWrap="true"
          ></Label>
        </GridLayout>
        <GridLayout class="p-20" v-if="currentTab === 2">
          <Label
            class="h1 text-center"
            text="Third tab"
            textWrap="true"
          ></Label>
        </GridLayout>
      </StackLayout>
      <MDBottomNavigationBar
        activeColor="blue"
        inactiveColor="grey"
        backgroundColor="white"
        @tabSelected="onBottomNavigationTabSelected"
        :titleVisibility="visibility"
        row="1"
      >
        <MDBottomNavigationTab title="Meine WG" icon="res://md_home" />
        <MDBottomNavigationTab title="Einkauf" icon="res://md_shopping" />
        <MDBottomNavigationTab title="Putzplan" icon="res://md_clean" />
        <MDBottomNavigationTab title="Kalender" icon="res://md_date" />
      </MDBottomNavigationBar>
    </GridLayout>
  </Page>
</template>

<script>

export default {
  data() {
    return {
      visibility: 1,
      currentTab: 0,
    };
  },
  watch: {
    currentTab(val) {
      alert(val);
    },
  },
  methods: {
    onBottomNavigationTabSelected(args) {
      this.currentTab = args.newIndex;
    },
  },
};
</script>

相反，在渲染打开<Overview />组件时，选择其他选项卡会将其删除，但是重新选择索引为0的Tab不会重新渲染任何内容，条件为currentTab === 2的网格布局也不会渲染。 / p>

我放入观察器中以检查状态更新是否触发的警报，所以我不明白为什么UI的行为如此奇怪。

Answer 1

如果要根据选定的选项卡隐藏和显示Overview组件，则可以尝试将v-if移到Overview标签，即@GetMapping(value = "/getdata" ,produces = "application/pdf" ) public ResponseEntity<?> getAccount() throws Exception { HttpResponse response = getData(); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); final InputStream inStream = response.getEntity().getContent(); InputStreamResource inputStreamResource = new InputStreamResource(inStream); String filename = "output.pdf"; headers.setContentDispositionFormData(filename, filename); headers.setCacheControl("must-revalidate, post-check=0, pre-check=0"); return new ResponseEntity<>(inputStreamResource, headers, HttpStatus.OK); }。您还应该删除<Overview v-if="currentTab === 0" />标签。

<Frame>标签用于导航，因此通常使用$ navigateTo（）函数设置其内容。

如果打算使用<Frame>进行导航，则需要确保导航到的所有组件（包括概述）都带有<Frame>标签作为<Page>中的根元素。

Nativescript Vue-状态已更新，但UI未更新

1 个答案: