小程序-如何实现一个view根据屏幕宽度来实现等宽高

最新推荐文章于 2024-11-19 18:02:04 发布

原创最新推荐文章于 2024-11-19 18:02:04 发布 · 8.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在小程序中让一个view的子元素按屏幕宽度的30%设置宽度和高度，通过调整布局和约束来实现等宽高效果。在iOS中此操作简单，但在小程序中需要设置特定的布局属性和约束。

提问:一个view上面放置3个子view,子view的宽度为屏幕宽度30%,高度和宽度一致?

在iOS中,so easy,所以我不说

码农从来话不多,以代码说话

<view class='diffenceContent superBgColor'>
  <view class='subContent subBgColor'>1</view>
  <view class='subContent subBgColor'>2</view>
  <view class='subContent subBgColor'>3</view>
  <view class='subContent subBgColor'>4</view>
</view>

.diffenceContent {
  display: flex;
   /* flex-direction: column;   */
  flex-wrap: wrap;
  width: 100%;
  top: 20px;
  height: 200px;
  justify-content: space-between;

  /* align-items: stretch;  */
}

上面设置了子view的布局方式flex,并且可以换行,在主轴线上的对齐方式

重点来了,子view的大小怎么确定,约束(原谅我用了ios的概念)该怎么写?

width: 30%;
height: width;

no?height并没有起作用

width: 30%;
padding-bottom: 30%;  
height: 0;

设置其底部或者顶部内布局和宽度一致即可,同样是30%,并将默认高度清除

这里可能会有疑问:这个30%是怎么来的?请看下面

podding属性值

length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比上内边距
inherit	规定应该从父元素继承上内边距。

遗留问题:

这里新发现的问题是这么设定,它的子视图显示会有问题(子视图会在其外面显示,可能是因为height:0的缘故吧)