微信小程序高度自适应布局

最新推荐文章于 2024-10-11 15:57:59 发布

poetPg

最新推荐文章于 2024-10-11 15:57:59 发布

阅读量2.8w

点赞数 4

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_42488404/article/details/82378339

版权

本文介绍了如何在微信小程序中实现图片和文字描述区域各占屏幕50%的全屏自适应布局。通过内联样式设置高度，并在JavaScript中动态计算以确保适配不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上图是我想要实现的效果，图片和文字描述区域各占屏幕的50%；在微信小程序中的通常做法是内联样式控制。

<!--index.wxml-->
<view class="">
    <view class="img_box" style='height:{
  {helfH}}rpx'>
        <image src='../../image/2.jpg'></image>
    </view>
    <view class="text_box" style='height:{
  {helfH}}rpx'>
        <view class="text_content" style='height:{
  {textH}}rpx'>
            你愿意成为rwby小队的一员么？
        </view>
        <view class="do_box">
            <view class="do_btn do_a">A.同意</view>
            <view class="do_btn do_b">B.不同意</view>
        </view>
    </view>
</view>

我们在内联样式中设置好高度值，h