horizontal-scroll-list 横向滚动面板

解释:横向滚动面板,用于信息展示,可放置在页面的任何位置。

属性说明

属性名类型必填默认值说明

titleList

Array

左侧标题数据

contentList

Array.<array>

内容数据

iconColor

String

#2b99ff

超出两行截断时提示 icon 的颜色

lastRowBg

String

#fff

最后一行的背景颜色

lastRowColor

String

#000

最后一行的字体颜色

lastRowDiff

Boolean

false

最后一行是否展示自定义样式

smt-left-title

String

提供扩展样式类,供开发者自定义组件样式,可通过此 class 改变左侧标题样式

smt-top-title

String

提供扩展样式类,供开发者自定义组件样式,可通过此 class 改变顶部标题样式

smt-content-item

String

提供扩展样式类,供开发者自定义组件样式,可通过此 class 改变每一项内容的样式

bind:lower

EventHandle

滚动到右边,会触发 lower 事件

bind:upper

EventHandle

滚动到左边,会触发 upper 事件

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例

  • SWAN
  • JS
  • CSS
  • JSON
  1. <smt-horizontal-scroll-list
  2. title-list="{{titleList}}"
  3. content-list="{{contentList}}"
  4. smt-left-title="smt-left-title"
  5. smt-top-title="smt-top-title"
  6. smt-content-item="smt-content-item"
  7. bind:lower="lower"
  8. bind:upper="upper"
  9. ></smt-horizontal-scroll-list>