html52.com
我爱小程序-开发者交流社区

如何用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

                })

            }    

        })

    }

    效果图如下:

    效果图如下: 效果图如下:
    效果图如下:


    效果图如下:





网友回复

卢霄霄:

题外话:

固定头部带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>

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付