⼩程序view中⼦view排列⽅式以及垂直居中.wxml⽂件:列表中的每⼀个item,有三部分,⾼度不同,item⾼度根据内容显⽰⾼度,item中的⼦view垂直居中
<
view
wx:for
=
"{{ dataWeekList }}"
wx:for-item
=
"item">
<
view
class
=
"separate"></
view
>
<
view
class
=
"viewweek">
<
view
class
=
'viewday'>
<
text
>
{{item.dayofmonth}}\n{{item.dayofweek}}
</
text
>
</
view
>
'viewtimetask'>
<
view
wx:for
=
"{{ item.timetask }}"
wx:for-item
=
"itemday">
<
text
>
{{itemday.time}}\t{{itemday.task}} </
text
>
</
view
>
</
view
>
<
view
class
=
'item_image'>
<
text
>
>
text align center
</
text
>
</
view
>
</
view
>
.wxss⽂件
.viewweek
{
background:
#ffffff
;
border-radius:
20
rpx
;
display:
flex
;
flex-direction:
row
;
padding-top:
10
rpx
;
padding-bottom:
10
rpx
;
/
**其中⼦view垂直居中显⽰*/
align-items:
center
;
}
rpx
;
background: #f5f5f5
;
}
.viewday
{
background: #dddddd
;
border-radius: 20
rpx
;
margin-left: 20
rpx
;
margin-right: 20
rpx
;
text-align: center
;
padding:
20
rpx
;
}
rpx
;
height:
22
rpx
;
margin-right: 40
rpx
;
position: absolute
;
right:
rpx
;
align-content: center
;
color:
#999999
;
}
.viewtimetask {
color:
#333333
;
font-size:
28
rpx
;

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。