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

最新推荐文章于 2024-07-03 19:39:59 发布

poetPg

最新推荐文章于 2024-07-03 19:39:59 发布

阅读量2.8w

点赞数 4

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_42488404/article/details/82378339

版权

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

摘要由CSDN通过智能技术生成

上图是我想要实现的效果，图片和文字描述区域各占屏幕的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