Nativescript 移回结果页面为空白

Question

如果您 select 乘坐火车，您将转到此页面，您可以在其中查看换乘。

如果您点击火车，您将转到另一个页面，在那里可以看到火车停靠的地方。

但是如果你按返回（系统返回）你会得到一个空白页面见底部的图片。

我不知道为什么会这样。

空白页是ListView他没有渲染的

<FlexboxLayout dock="center" class="dock-center">
                <ListView for="item in $props.selectTravelDetails.Routes" marginLeft="5%" @itemTap="navigateToRouteDetails">
                    <v-template>
                        <FlexboxLayout height="180" flexDirection="column">
                            <FlexboxLayout height="10">
                            </FlexboxLayout>
                            <FlexboxLayout class="trainDetails">
                                <FlexboxLayout class="trainTimeDetails">
                                    <Label :text="item.TimeInfos[item.departureStation].DepTime"></Label>
                                    <Label class="fas" :color="$props.language.trainTypes[item.trainType].color" :text="'\uf238' | unescape"></Label>
                                    <Label :text="item.TimeInfos[item.arrivalStation].ArrTime"></Label>
                                </FlexboxLayout>
                                <FlexboxLayout class="route">
                                    <Label class="far" :text="'\uf111' | unescape"></Label>
                                    <FlexboxLayout class="template-line">
                                        <Label class="line"></Label>
                                    </FlexboxLayout>
                                    <Label class="far" :text="'\uf111' | unescape"></Label>
                                </FlexboxLayout>
                                <FlexboxLayout class="trainDestArrDetails">
                                    <Label v-if="$store.state.language === 'ZH'" class="departure" :text="$store.state.searchFile[item.departureStation].站名"></Label>
                                    <Label v-else class="departure" :text="$store.state.searchFile[item.departureStation].eng站名"></Label>
                                    <FlexboxLayout class="trainDetailsIcons">
                                        <FlexboxLayout class="information">
                                            <Label :text="$props.language.trainTypes[item.trainType].name + ' ' + item.Train"></Label>
                                            <FlexboxLayout class="trainIcons">
                                                <Label v-if="item.BreastFeed === 'Y'" class="fas" :text="'\uf77c' | unescape"></Label>
                                                <Label v-if="item.Dinning === 'Y'" class="fas" :text="'\uf2e7' | unescape"></Label>
                                                <Label v-if="item.Cripple === 'Y'" class="fas" :text="'\uf193' | unescape"></Label>
                                                <Label v-if="item.Bike === 'Y'" class="fas" :text="'\uf206' | unescape"></Label>
                                            </FlexboxLayout>
                                        </FlexboxLayout>
                                        <FlexboxLayout class="navigation">
                                            <Label class="fas" :text="'\uf054' | unescape"></Label>
                                        </FlexboxLayout>
                                    </FlexboxLayout>
                                    <Label v-if="$store.state.language === 'ZH'" class="arrival" :text="$store.state.searchFile[item.arrivalStation].站名"></Label>
                                    <Label v-else class="arrival" :text="$store.state.searchFile[item.arrivalStation].eng站名"></Label>
                                </FlexboxLayout>
                            </FlexboxLayout>
                            <FlexboxLayout height="10">
                            </FlexboxLayout>
                        </FlexboxLayout>
                    </v-template>
                </ListView>
            </FlexboxLayout>

更新

当我点击白色的时候space正常应该是火车我还是会去详细的。

Answer 1

我空白的问题是因为内联 CSS:

        <FlexboxLayout dock="center" class="dock-center">
               <ListView for="item in $props.selectTravelDetails.Routes" marginLeft="5%" @itemTap="navigateToRouteDetails">
                    <v-template>
                        <FlexboxLayout height="180" flexDirection="column">
                            <FlexboxLayout height="10">
                            </FlexboxLayout>
                            <FlexboxLayout class="trainDetails">
                               // some other code
                            </FlexboxLayout>
                            <FlexboxLayout height="10">
                            </FlexboxLayout>
                        </FlexboxLayout>
                    </v-template>
                </ListView>
          </FlexboxLayout>

所以我改成了：

           <FlexboxLayout dock="center" class="dock-center">
               <ListView for="item in $props.selectTravelDetails.Routes" class="listTrain" @itemTap="navigateToRouteDetails">
                    <v-template>
                        <FlexboxLayout class="oneTrainElement" flexDirection="column">
                            <FlexboxLayout class="whiteSpace">
                            </FlexboxLayout>
                            <FlexboxLayout class="trainDetails">
                               // some other code
                            </FlexboxLayout>
                            <FlexboxLayout class="whiteSpace">
                            </FlexboxLayout>
                        </FlexboxLayout>
                    </v-template>
                </ListView>
            </FlexboxLayout>

    .dock-center .listTrain{
        margin-left: 5%;
    }

    .dock-center .listTrain .oneTrainElement{
        height: 180;
    }

    .dock-center .listTrain .whiteSpace{
        height: 10;
    }

Nativescript 移回结果页面为空白

Nativescript moving back result page is blank

listview

nativescript

nativescript-vue

更新