根据设备高度在 ScrollView 中动态调整 Nativescript ContentView 的大小
Posted
技术标签:
【中文标题】根据设备高度在 ScrollView 中动态调整 Nativescript ContentView 的大小【英文标题】:Dynamically size Nativescript ContentView within ScrollView based on device height 【发布时间】:2019-04-28 06:27:59 【问题描述】:我有一个 Nativescript Vue 组件模板定义为:
<ScrollView>
<StackLayout>
<ContentView ref="mapContainer" >
<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
本来是一个二传手,但我想我错过了重绘 (?) 以使此更改生效,但不确定如何?
【问题讨论】:
【参考方案1】:要通过引用访问ContentView
,您必须使用.nativeView
属性。
this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs
此外,您不必计算高度,只需以百分比 (70%) 而非固定值 (500) 设置高度,或者使用具有 7 个分区 (7*) 的 GridLayout。
【讨论】:
完美运行,谢谢。由于某种原因,Mapbox 组件需要在 ScrollView 中固定高度,否则它不会呈现。以上是关于根据设备高度在 ScrollView 中动态调整 Nativescript ContentView 的大小的主要内容,如果未能解决你的问题,请参考以下文章