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 事件 |
示例
跳转编辑工具
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<smt-horizontal-scroll-list
title-list="{{titleList}}"
content-list="{{contentList}}"
smt-left-title="smt-left-title"
smt-top-title="smt-top-title"
smt-content-item="smt-content-item"
bind:lower="lower"
bind:upper="upper"
></smt-horizontal-scroll-list>