本人菜菜,被这个问题困扰了好久。
其想实现用白色部分完全包裹内容的功能,结果设置了min-height: 120rpx;后发现无法奏效。
多次寻找后无果,遂来询问。
WXML
<view id="_all">
<view id="_head">
<view id="_headtest">山小科</view>
<view id="_headtestlast">全心全意为同学服务!</view>
</view>
<view class="_content">
<view class="_contentflex" wx:for="{{functions}}" wx:key="index">
<!-- 具体各个功能 -->
<view style="width: 100%;display:flex">
<view class="style_one" bindtap="getevent{{item.id}}">
</view>
<view style="height: 100%;width: 60rpx;"></view>
<view class="style_one" bindtap="getevent{{item.id}}">
</view>
</view>
</view>
</view>
<div style="clear:both;height:0px;font-size: 1px;line-height: 0px;"></div>
</view>
WXSS
/* pages/message/message.wxss */
page {
background: #FFC785;
}
#_all {
width: 100%;
background-color: #fafafa;
position: relative;
min-height: 120rpx;
height: auto !important;
top: 300rpx;
background: #FFFFFF;
border-radius: 20px 20px 0px 0px;
flex-direction: column;
display: flex;
}
#_head {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
width: 160px;
height: 160rpx;
left: 60rpx;
top: 90rpx;
}
#_headtest {
width: 100%;
height: 60rpx;
font-family: 'Abyssinica SIL';
font-style: normal;
font-weight: 400;
font-size: 36px;
display: flex;
align-items: center;
color: #000000;
opacity: 0.8;
}
#_headtestlast {
width: 100%;
height: 60rpx;
font-family: 'Abyssinica SIL';
font-style: normal;
font-weight: 400;
font-size: 16px;
display: flex;
align-items: center;
color: #000000;
opacity: 0.8;
}
._content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 30px;
position: absolute;
width: 630rpx;
left: 60rpx;
top: 230rpx;
}
._contentflex {
position: relative;
border: 1rpx solid antiquewhite;
width: 100%;
height: 350rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 30px;
flex: none;
order: 0;
flex-grow: 0;
}
._tip {
width: 100%;
height: 60rpx;
border-bottom: 1rpx solid #d8d0d0;
}
._image {}
.style_one {
width: 285rpx;
height: 350rpx;
background: #FFA31A;
box-shadow: 0px 10px 20px rgba(255, 163, 25, 0.2);
border-radius: 15px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}