Question

我有一个Nativescript Vue组件模板，定义为：

<ScrollView>
    <StackLayout>
        <ContentView ref="mapContainer" height="500" width="100%">
            <Mapbox
            accessToken="my access key"
            mapStyle="outdoors-v9"
            hideCompass="true"
            zoomLevel="10.2" , 
            latitude="51.949266"
            longitude="-12.183571"
            showUserLocation="true"
            disableZoom="true"
            disableRotation="true"
            disableScroll="true"
            disableTilt="true"
            @mapReady="onMapReady($event)">
            </Mapbox>
        </ContentView>
        <Label text="A test label"/>
    </StackLayout>
</ScrollView>

安装组件时，我想将mapContainer的高度设置为屏幕高度的大约75％。为此，我有：

export default {
    name: "MyPage",

    mounted () {
        this.$refs.mapContainer.height = platform.screen.mainScreen.heightDIPs
    }

    ...

}

但这没什么用，ContentView仍然保持在500dp高。

height本来是塞特犬，但我想我错过了重新绘制（？）才能使此更改生效的方法，但不确定如何做？

Answer 1

要通过引用访问ContentView，必须使用.nativeView属性。

this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs

此外，您不必计算高度，而只需以百分比（70％）代替固定值（500）设置高度，或者使用具有7个分区（7 *）的GridLayout。

根据设备高度在ScrollView中动态调整Nativescript ContentView的大小

1 个答案: