微信小程序 在横向滑动中 图片居中简单的方法 怎么写
时间: 2023-06-27 17:04:28 浏览: 157
微信小程序如何调用图片接口API并居中显示
可以使用 `scroll-view` 和 `view` 嵌套的方式来实现横向滑动,并使用 `flex` 布局来将图片居中。具体实现步骤如下:
1. 在 `scroll-view` 中设置 `scroll-x` 属性为 `true`,表示支持横向滚动。
2. 在 `scroll-view` 中建立 `view`,设置 `display` 属性为 `flex`,并使用 `justify-content: center` 和 `align-items: center` 将图片在水平和垂直方向上都居中。
3. 在 `view` 中插入图片。
示例代码如下:
```html
<scroll-view scroll-x="true">
<view style="display: flex; justify-content: center; align-items: center;">
<image src="图片路径"></image>
</view>
</scroll-view>
```
阅读全文