原语后退结果页为空白

Question

如果选择火车，您将转到此页面，在此您可以看到转车。

如果单击火车，您将转到另一页，查看火车的停靠点。

但是，如果您按回退键（系统后退），您将获得空白页，底部显示图片。

我不知道为什么会这样。

空白页是他未呈现的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>

更新

当我单击正常应该是火车的空白区域时，我仍将进入详细信息。

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;
    }