小程序for循环位置摆放导致样式出错的坑

样式:

.teacher-list-container {

width: 100%;

height: 140 rpx;

display: flex;

flex-direction: row;

background: lightcyan;

}

.teacher-item-container {

width: 150 rpx;

height: 140 rpx;

display: flex;

background: lightcoral;

flex-direction: column;

align-items: center;

}

.image-teacher-avator {

width: 90 rpx;

height: 90 rpx;

border-radius: 100%;

display: block;

overflow: hidden;

}

.text-teacher-name {

color: gray;

font-size: 0.9rem;

margin-top: 10 rpx;

width: 140 rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

text-align: center;

}

错误实现方式:

< view class= "teacher-list-container" wx:for= "{{teacherList}}" wx:for-index= "startindex" wx:if= "{{startindex<4}}">

< view class= "teacher-item-container">

< image class= "image-teacher-avator" src= '../images/user_head.jpg'></ image >

< text class=" text-teacher-name">哈哈 </ text >

</ view >

</ view >

布局中设置了flex, 并且是row横向摆放的, 实现出来却是纵向摆放了, 如图:

正确实现方式:

< view class= "teacher-list-container">

< view class= "teacher-item-container" wx:for= "{{teacherList}}" wx:for-index= "startindex" wx:if= "{{startindex<4}}">

< image class = "image-teacher-avator" src = '../images/user_head.jpg'></ image >

< text class=" text-teacher-name">哈哈 </ text >

</ view >

</ view >

最后说明: 之前将for循环放在外面容器, 实现效果都没问题, 也是今天才遇到这样, 尴尬~  (另外js文件我就没放上了, teacherList可自行定义)