收藏
评论

如何用js动态计算容器的高度?

  1. 微信度量单位 1px = 2rpx; 这个是以iphone6的尺寸作为一个基准,可视宽高(宽:375px;高:603px)

  2. 废话不多说,直接贴代码跟图

    wxml如下:

  3. <view>

        <view style='height:200rpx;width :100%;background:yellow'>这是高度为200rpx的view</view>

        <scroll-view style='background:red;width:100%;height:{{height}}rpx' >

            这是高度动态计算的scroll-view

        </scroll-view>

    </view>


    js如下:

    onShow:function(){

        let that = this;

        wx.getSystemInfo({

            success(res) {

                console.log(res)

                let height = (res.windowHeight * 2) * (375 / (res.windowWidth)) - 200 ;

                that.setData({

                    height: height

                })

            }    

        })

    }

    效果图如下:









最后一次编辑于  02-19  (未经腾讯允许,不得转载)
复制链接收藏赞 1

2 个评论

  • 卢霄霄
    卢霄霄
    02-19

    题外话:

    固定头部带scroll-view的布局,可以用flex。大致意思是:

    <page style="height:100%;display:flex;flex-direction:column">

        <view style="height:200rpx"></view>

        <scroll-view style="height:10rpx;flex:1"></scroll-view>

    </page>

    02-19
    赞同
    回复 1
    • iHealth 王深镇
      iHealth 王深镇
      02-19

      嗯,这也是个方法,最近看到有人在问怎么计算这个高度的问题,就试着找了个方法

      02-19
      回复