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

最新推荐文章于 2025-06-05 00:18:56 发布

wahYip

最新推荐文章于 2025-06-05 00:18:56 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/wahYip/article/details/80592935

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个关于使用Flex布局实现横向教师列表时遇到的问题，并给出了正确的实现方式。原本期望的横向布局变成了纵向显示，通过调整for循环的位置解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式:

.teacher-list-container {
  width: 100%;
  height: 140rpx;
  display: flex;
  flex-direction: row;
  background: lightcyan;
}
.teacher-item-container {
  width: 150rpx;
  height: 140rpx;
  display: flex;
  background: lightcoral;
  flex-direction: column;
  align-items: center;
}

.image-teacher-avator {
  width: 90rpx;
  height: 90rpx;
  border-radius: 100%;
  display: block;
  overflow: hidden;
}

.text-teacher-name {
  color: gray;
  font-size: 0.9rem;
  margin-top: 10rpx;
  width: 140rpx;
  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>