求助:页面高度计算解决思路与实现过程.



  • 在实际开发中,往往一个页面是由多个组件构成,现在有一个实现需求大家帮忙一起看看,讨论一下。

    问题描述:

    一个组件 Layout, 由三个子组件构成,分别为 header,content,footer, 构成如下

    <Layout >
        <Header> head 内容 定义高度为 100</Header>
        <Content>
             <ScrollView>主体内容 高度不定</ScrollView>
        </Content>
        <Footer>foot 内容 高度定义为 100</Footer>
    </Layout>
    

    A页面,引用组件 Layout, 引用了以上三个子组件,我们假定手机屏的高度为 800。

    此时,我们可以通过 手机屏高度和header/footer 的高度来定义 ScrollView 的度高。

    此时,页面跳转到 b页面。

    由三个子组件构成,分别为 header,content,footer, 构成如下

    <Layout >
        <Header> head 内容 定义高度为 100</Header>
        <Content>
             <ScrollView>主体内容 高度不定</ScrollView>
        </Content>
        <Footer>foot 内容 高度定义为 200</Footer>
    </Layout>
    

    同时。一样的可以算出ScrollView的度高。

    再由 b页面。返回到 a页面地。
    此时的 a页面应该为foot高度为 100。但是却是200.大家有没有遇到过这个问题?
    三个页面的高度。都存在于 layout 的 state 中。



  • 因为 header/footer的高度。都不是固定的。我目前的实现方法:

    Layout :页面渲染完成 发送消息,
    header页面接收到消息,计算其自身的高度。通过 Taro.createSelectorQuery() .....这个方法得到实时高度后,再发送消息。
    footer 页面与header页面实现逻辑一样。

    header/footer组件计算了自身的高度后 发消息。Layout 接收到消息后,再进行 setState 操作。

    同时。header/footer 的页面信息。存在于 layout 的 state中。并作为 props传给 content 页面。

    content 页面根据设备的高度,和传过来的 props的值进行计算高度。

    当header/footer高度发生变化时,content 的 props 值也发生 变化。这样就可以实现 content 的高度会根据 header/footer 的高度改变面改变。



  • 大家一起讨论一下。看有没有更好的办法。来实现。

    主要问题在于。当通过 Taro.navigateBack 返回到之前页面的时候。无法执行 返回后页面的相关方法。



  • 或者简单的说。有没有办法。在 A页中或者 Layout 组件中监听到 路由的变化。。


登录后回复