微信小程序开发设置text在图片下方

微信小程序开发中，要在图片下方显示文本，可以利用`view`标签来创建一个包含`image`和`text`元素的布局。这里是一个简单的示例：

<view class="container">
  <image src="{{yourImageSource}}" class="image" mode="widthFix"></image>
  <view class="description">
    <text>{{yourTextContent}}</text>
  </view>
</view>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 图片在上，文字在下 */
}

.image {
  width: 100%; /* 或者自适应宽度 */
}

.description {
  margin-top: 20rpx; /* 根据需要调整文字和图片的距离 */
}
</style>

在这个例子中，你需要将`${yourImageSource}`替换为你的图片URL，`${yourTextContent}`替换为你想要显示的文字内容。`.description`容器通过`align-items: flex-start`使其内容位于图片的底部。

相关问题

微信小程序开发怎么让文本位于右下方

要让文本位于右下方，你可以使用CSS来设置文本的位置。在微信小程序中，可以使用`view`组件来包裹文本，并设置相应的样式。

首先，在WXML文件中，创建一个`view`组件来包裹文本：

<view class="text-container">
  <text class="text">你的文本内容</text>
</view>

然后，在WXSS文件中，为`text-container`类设置样式，使其位于右下方：

.text-container {
  position: fixed;
  bottom: 0;
  right: 0;
}

.text {
  /* 可根据需要设置文本的样式 */
}

这样，文本将会位于右下角。你可以根据实际需求调整`text-container`类和`text`类的样式，以达到你想要的效果。

在微信小程序中，使用滑动选择器设置本地图片宽度和高度，改变图片显示大小，图片显示在滑动选择器下方

可以通过以下步骤实现：

1. 在wxml中添加一个滑动选择器和一个图片组件，如下所示：

<view class="container">
  <picker mode="multiSelector" bindchange="bindSizeChange">
    <view class="picker">
      <view class="picker-text">{{widths[selectedWidthIndex]}} * {{heights[selectedHeightIndex]}}</view>
    </view>
    <picker-view class="picker-view" indicator-style="height: 50rpx;" indicator-class="picker-indicator" style="width: 100%;">
      <picker-view-column>
        <view class="picker-item" wx:for="{{widths}}" wx:key="index">{{item}}</view>
      </picker-view-column>
      <picker-view-column>
        <view class="picker-item" wx:for="{{heights}}" wx:key="index">{{item}}</view>
      </picker-view-column>
    </picker-view>
  </picker>
  <image src="{{imageSrc}}" mode="aspectFit" style="width: {{width}}px; height: {{height}}px;"></image>
</view>

2. 在js文件中定义滑动选择器的选项和初始值，以及绑定滑动选择器值变化的事件，如下所示：

Page({
  data: {
    widths: [100, 200, 300, 400, 500],
    heights: [100, 200, 300, 400, 500],
    selectedWidthIndex: 0,
    selectedHeightIndex: 0,
    width: 100,
    height: 100,
    imageSrc: 'https://example.com/image.png'
  },
  bindSizeChange: function(e) {
    var values = e.detail.value;
    var width = this.data.widths[values[0]];
    var height = this.data.heights[values[1]];
    this.setData({
      selectedWidthIndex: values[0],
      selectedHeightIndex: values[1],
      width: width,
      height: height
    });
  }
})

3. 在wxss文件中定义样式，如下所示：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 32rpx;
}

.picker {
  margin-bottom: 20rpx;
}

.picker-text {
  color: #999;
}

.picker-view {
  width: 100%;
  height: 200rpx;
}

.picker-item {
  line-height: 50rpx;
  text-align: center;
}

.picker-indicator {
  background-color: #f8f8f8;
}

.image {
  margin-top: 20rpx;
}

这样就可以实现在微信小程序中使用滑动选择器设置本地图片宽度和高度，改变图片显示大小，并且图片显示在滑动选择器下方。