根据设备高度在 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 的大小的主要内容,如果未能解决你的问题,请参考以下文章

使用多个 SubView 调整 ScrollView

如何根据动态内容调整 textview 和 scrollview 内容大小

滚动视图内的iOS webView:根据设备方向更改高度

Swift - 在滚动时增大和缩小 UIView

如何根据浏览器的尺寸自动沿div宽度调整div高度

将 ScrollView 高度调整为屏幕高度?