文档中心>实践教程>腾讯云微搭低代码>实现图片横向滚动多端适配

实现图片横向滚动多端适配

最近更新时间:2024-12-16 17:49:42

我的收藏

背景

滚动容器在实现图片横向滚动的场景下,小程序端存在兼容性问题,需要手动调整滚动容器以及图片的样式来兼容所有客户端。

操作步骤

Web 端实现图片横向滚动

1. 编辑器中使用滚动容器以及图片组件。



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



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



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



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




小程序端兼容图片横行滚动

1. 在上述最后的步骤当中,给每一张图片添加 css 样式 flex-shrink: 0



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