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

腾讯云微搭低代码 数据列表如何实现横向滚动

• 腾讯云产品

当前微搭编辑器数据列表组件中，关于数据源的循环展示默认是块级元素，遵循从页面由上到下排列，在一些特定的应用场景中，需要将循环数据水平排列，实现横向滚动的效果。

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

一、实现方案

数据列表组右侧属性面板不支持设置横向滚动属性，需要用自定义样式来改变数据列表默认的展示方式。

二、实现步骤

1. 在编辑器中使用数据列表组件，并设置好数据模型。

2. 在右侧面板设置数据列表组件的 css。

3. 自定义 css 样式，单击右上角保存即可保存编辑内容。

:scope .weda-list-view__content{ display: flex;}

4. 效果展示。

三、注意事项

数据列表的横向实现方式适用于 PC 端，移动端不建议使用。

相关内容：

  1. 腾讯云微搭低代码 顶部选项卡自定义样式 这篇说明腾讯云微搭低代码顶部选项卡组件在样式API不满足需求时，通过自定义CSS修改文字、选中项及下划线样式的方法，并指导通过开发者工具查找类名实现自定义。 自定义CSS：通过添加样式代码可修改选项文字、选中项文字及下划线样式。 开发者工具：当样式API缺少属性时，使用浏览器开发者模式查找元素类名并修改。...
  2. 腾讯云微搭低代码 实现顶部选项卡的数据切换 1. 新建数据模型，其中字段“商品分类”作为顶部选项卡切换标签项。4. 在布局组件-布局内容添加顶部选项卡组件，并设置顶部选项卡标签，其中选项标签名称分别对应“全部”、“啤酒”、“洋酒”、“白酒”，标签值分别对应“0”，“1”，“2”，“3”。...
  3. 腾讯云微搭低代码 表格列 JSON 表达式编写指引 数据表格已支持配置表格列的数据类型，实现自定义的展示效果控制，其中，数据格式属性可选 JSON，并通过表达式属性实现复杂的单元格展示效果。...
  4. 腾讯云微搭低代码 子账号管控云开发平台菜单权限 云开发平台目前没有提供子账号对于主菜单的权限管控机制，因此在一些需要子账号限制相关菜单访问的场景，可以将主菜单调用的微搭云 API 进行 CAM 策略控制，达到子账号对不同菜单的管控目的。...
  5. 腾讯云微搭低代码 微搭修改小程序全局配置文件 在小程序开发中，小程序全局配置文件决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等，小程序完整配置项说明本篇文档主要介绍在微搭中搭建的小程序如何修改全局配置。...
  6. 腾讯云微搭低代码 实现腾讯问卷满意度调查 腾讯问卷与腾讯云微搭联合后，开发者通过微搭平台即可在应用中嵌入问卷能力进行满意度调查的投放，并将问卷的结果同步至微搭，以便后续进行分析。这篇将指导你如何在应用中加入腾讯问卷，并如何使用问卷 WebHook 能力将数据同步至微搭。...
  7. 腾讯云微搭低代码 小程序中实现文件下载 excel、pdf、word 等类型文件在小程序中并不能直接保存到手机本地，需要调用小程序相关 API，以生成在线预览文件的形式实现转发保存。本篇实践主要介绍如何在小程序场景中实现文件从下载到保存的步骤。...
  8. 腾讯云微搭低代码 小程序端实现页面下拉刷新 为实现小程序下拉刷新页面，一共需要执行以下两个步骤2. 在页面的生命周期中增加 onPullDownRefresh 事件，并定义刷新的内容，刷新完成之后停止下拉刷新动效。...
赞 (0)
上一篇 4天前
下一篇 4天前