背景
滚动容器在实现图片横向滚动的场景下,小程序端存在兼容性问题,需要手动调整滚动容器以及图片的样式来兼容所有客户端。
操作步骤
Web 端实现图片横向滚动
1. 编辑器中使用滚动容器以及图片组件。


2. 滚动容器启用横向滚动和 flexbox 布局。


3. 滚动容器自定义 css 样式,添加
display:flex
属性。

4. 上述步骤完成后,可以看到图片已经按横向滚动排列。


5. 调整图片之间的外边距,这里以
margin-right:10px
为例。

小程序端兼容图片横行滚动
1. 在上述最后的步骤当中,给每一张图片添加 css 样式
flex-shrink: 0
。

2. 发布应用,在小程序端预览效果如下。

