微信小程序图片和文字在同一行，怎么让文字换到图片底下

要在微信小程序中实现图片和文字在同一行显示，且当文字过多时自动换行到图片下方，你可以使用`flexbox`布局。在`view`组件上设置`display: flex`，`align-items: flex-start`（保持默认行为，即文本开始于容器顶部），并给图片和文字适当的宽度和对齐方式。

例如，创建一个包含图片和文字的`swiper-item`：

<view class="container">
  <image src="{{yourImage}}" style="width: auto; height: auto; margin-right: 10rpx;" />
  <text class="text" wx:if="{{hasLongText}}">{{longText}}</text>
</view>

然后在样式表(`styles.wxss`)中添加`.container`的样式：

.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* 或者 center 如果你想居中放置图片 */
  flex-wrap: wrap; /* 当内容超过一行时允许换行 */
}

.text {
  width: calc(100% - (图片宽度 + margin-right)); /* 计算剩余空间 */
  white-space: nowrap; /* 防止文字折行 */
}

如果`longText`很长，需要判断是否超出容器长度才展示换行，可以使用条件渲染：

Page({
  data: {
    longText: '这是非常长的文字，可能会换行...',
    hasLongText: this.data.longText.length > 15, // 设置一个阈值，比如15个字符
  },
})