我有一个 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
本来是一个 setter ,但我想我缺少重绘(?)以使此更改生效,但不确定如何?
最佳答案
为了通过引用访问 ContentView
,您必须使用 .nativeView
属性。
this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs
此外,您不必计算高度,只需以百分比(70%)而不是固定值(500)设置高度,或者使用具有 7 个分区(7*)的 GridLayout。
关于nativescript - 根据设备高度动态调整 ScrollView 中 Nativescript ContentView 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53484014/