scroll-view制作横向图片滚动
时间: 2023-08-06 08:06:59 浏览: 186
图片横向滚动
4星 · 用户满意度95%
要制作横向图片滚动,可以使用小程序中的 scroll-view 组件。以下是一个简单的示例代码:
```
<scroll-view scroll-x="true" style="white-space: nowrap;">
<image src="/images/image1.jpg" style="display:inline-block;width:100px;height:100px;"></image>
<image src="/images/image2.jpg" style="display:inline-block;width:100px;height:100px;"></image>
<image src="/images/image3.jpg" style="display:inline-block;width:100px;height:100px;"></image>
<image src="/images/image4.jpg" style="display:inline-block;width:100px;height:100px;"></image>
<image src="/images/image5.jpg" style="display:inline-block;width:100px;height:100px;"></image>
</scroll-view>
```
其中 `scroll-x="true"` 表示开启横向滚动,`white-space: nowrap;` 表示不换行。每个图片都设置了 `display:inline-block;width:100px;height:100px;`,使其在同一行显示,并且设置了固定的宽高。你可以根据自己的需求,调整图片的宽高和数量。
阅读全文