.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
>
<
view
class
=
'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
>
</
view
>
</
view
>
</
view
>
.wxss文件
在父级别vview中设置 align-items: center;子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
;
}
.separate
{
height:
20
rpx
;
background:
#f5f5f5
;
}
.viewday
{
background:
#dddddd
;
border-radius:
20
rpx
;
margin-left:
20
rpx
;
margin-right:
20
rpx
;
text-align:
center
;
padding:
20
rpx
;
}
.item_image
{
width:
22
rpx
;
height:
22
rpx
;
margin-right:
40
rpx
;
position:
absolute
;
right:
0
rpx
;
align-content:
center
;
color:
#999999
;
}
.viewtimetask
{
color:
#333333
;
font-size:
28
rpx
;
display:
flex
;
flex-direction:
column
;
flex:
1
;
}
在父级别vview中设置 align-items: center;子view可垂直居中
display:
flex
;弹性容器
flex-direction:
row
;子view排列方式row--水平 column--垂直
flex在子view中设置,flex:1;表示出去其他子view后,剩下的款或高全部分给该view
text-align: center;文本居中对齐
border-radius: 20rpx;设置view圆角弧度
flex在子view中设置,flex:1;表示出去其他子view后,剩下的款或高全部分给该view
text-align: center;文本居中对齐
border-radius: 20rpx;设置view圆角弧度