微信小程序横向滚动的图片下面还要加文字
时间: 2023-10-07 07:12:38 浏览: 530
实现方式:
1. 在 wxml 文件中添加一个 scroll-view 组件,设置横向滚动。
```
<scroll-view class="scroll-view" scroll-x="true">
<!-- 这里放置横向滚动的内容 -->
</scroll-view>
```
2. 在 scroll-view 中添加一个 view 组件作为容器,用来包含图片和文字。
```
<scroll-view class="scroll-view" scroll-x="true">
<view class="item">
<image class="image" src="图片地址"></image>
<text class="text">文字内容</text>
</view>
<!-- 这里可以添加多个 item -->
</scroll-view>
```
3. 在 css 文件中设置 item 的样式,包括宽度、高度、内边距等。
```
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 200rpx;
height: 250rpx;
padding: 20rpx;
}
```
4. 在 css 文件中设置 image 和 text 的样式,包括宽度、高度、字体大小等。
```
.image {
width: 160rpx;
height: 160rpx;
}
.text {
font-size: 28rpx;
margin-top: 20rpx;
}
```
5. 根据需求调整样式和布局即可。
```
.scroll-view {
height: 300rpx;
background-color: #f2f2f2;
}
```
阅读全文