云服务器特惠 99/年起
  1. 腾讯云优惠网首页
  2. 腾讯云产品

腾讯云微搭低代码 实现图片横向滚动多端适配

• 腾讯云产品

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

相关产品
腾讯云微搭低代码 产品页，含版本规格、价格与购买入口。

一、Web 端实现图片横向滚动

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

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

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

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

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

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

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

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

相关内容：

  1. 腾讯云微搭低代码 企业微信快速接入 这篇说明如何通过企业微信管理员授权，将企微可见范围的用户一键同步到腾讯云微搭低代码平台，并支持企微登录与工作台直接使用微搭。 授权同步：企微管理员扫码授权后，可见范围员工自动同步到微搭。 自动维护：微搭定时同步可见范围变更，新增或删除用户自动更新。 企微集成：同步后支持企微扫码登录，工作台可直接访问微搭模型应用。...
  2. 腾讯云微搭低代码 小程序端实现页面下拉刷新 为实现小程序下拉刷新页面，一共需要执行以下两个步骤2. 在页面的生命周期中增加 onPullDownRefresh 事件，并定义刷新的内容，刷新完成之后停止下拉刷新动效。...
  3. 腾讯云微搭低代码 在表单中对用户输入数据进行计算展示 在2个数字输入组件中输入单价和数量，在第3个数字输入组件中展示总价（单价*数量）。...
  4. 腾讯云微搭低代码 表单容器新增数据后获取数据标识 这篇说说在腾讯云微搭低代码中，通过表单容器提交事件的成功分支，使用变量赋值获取新增数据标识（event.detail.id）的实践方法。 配置步骤：创建文本变量，在提交事件的成功分支中为变量赋值event.detail.id。 效果：用户提交表单后，新增数据的标识可被存入变量供后续使用。...
  5. 腾讯云微搭低代码 数据列表组件如何实现搜索功能 微搭现版本数据列表组件自身是不带搜索功能的，想实现通过搜索查询数据的功能，可以利用单行输入框组件来实现相应功能。...
  6. 腾讯云微搭低代码 通过样式 API 灵活调整组件样式 在对组件进行样式调整时，如果样式属性面板中的配置不能满足业务需求，可以以在组件的 CSS 编辑面板中，编写样式 API，通过样式选择器，实现组件样式的精细化控制，具体方案如下。...
  7. 腾讯云微搭低代码 应用添加水印示例 export default { onAppLaunch(launchOpts) { (function () { function __canvasWM({ container = document.body, width = '300px', height = '200px', textAlign = 'center', textBaseline = 'middle', font = '20px Microsof。...
  8. 腾讯云微搭低代码 组件样式的动态控制 在前端样式控制中，我们经常需要通过点击、切换等事件来实现组件样式的动态更新。这篇以点击按钮控制文本组件文字颜色变化为例，进行该场景的介绍说明。...
赞 (0)
上一篇 4天前
下一篇 4天前