无缝滚动 | Smartchart开发手册

简介 #

无缝滚动组件适用于公告轮播、排行榜、数据表格等需要自动循环滚动内容的场景。SmartChart 提供两种滚动实现：ds_liMarquee（基于 liMarquee 插件，支持无缝衔接和丰富配置）和 ds_scroll（简单原生滚动）。

滚动函数	特点	适用场景
`ds_liMarquee(name, config)`	支持无缝衔接、方向/速度配置、悬停暂停	公告轮播、排行榜
`ds_scroll(name, interval, step)`	简单原生实现，CSS scrollTop	简单数据滚动

应用场景 #

无缝滚动组件适用于需要自动循环滚动内容的场景，例如：

公告/新闻列表自动上滚
实时数据排行榜循环展示
大屏轮播文字、图片等内容

SmartChart 提供了两种滚动方式：ds_liMarquee（基于 liMarquee 插件的无缝滚动）和 ds_scroll（简单原生滚动）。

通用无缝滚动：`ds_liMarquee` #

基础用法 #

在 HTML 组件中定义好滚动容器，然后在 JS 中调用 ds_liMarquee：

<!-- HTML 结构（可在图形的 HTML 模板区定义） -->
<div id="smtid" style="height:100%">
    <ul>
        <li>SmartChart</li>
        <li>大数据可视化</li>
        <li>ECharts</li>
        <li>让数据说话</li>
    </ul>
</div>

// 传入容器的 id 选择器
ds_liMarquee('#smtid')

// 也支持 class 选择器
ds_liMarquee('.smtclass')

数据集动态驱动的滚动列表 #

结合数据集动态生成滚动内容：

let dataset = __dataset__  // [['title'], ['公告一'], ['公告二'], ['公告三']]
let items = dataset.slice(1).map(row => `<li>${row[0]}</li>`).join('')

dom__name__.innerHTML = `<div id="scroll__name__" style="height:100%"><ul>${items}</ul></div>`

// 初始化无缝滚动
ds_liMarquee('#scroll__name__')

完整配置项 #

let marconfig = {
    playtime: 3000,    // 滚动持续时间（毫秒），大于 100 才启动轮播
    pausetime: 3000,   // 暂停持续时间（毫秒）
    config: {
        direction: 'up',      // 滚动方向：up / down / left / right
        runshort: false,      // 内容不足一屏时是否滚动（false=不滚动）
        scrollamount: 20,     // 滚动速度，数字越大越快
        loop: -1,             // 循环次数，-1 为无限循环
        circular: true,       // 是否无缝衔接（true=无缝，false=类似 marquee）
        drag: true,           // 是否支持鼠标拖动
        hoverstop: true       // 鼠标悬停时是否暂停
    }
}

ds_liMarquee('#scroll__name__', marconfig)

配置参数说明 #

参数	类型	默认值	说明
`direction`	字符串	`left`	滚动方向：`left` / `right` / `up` / `down`
`loop`	整数	`-1`	循环次数，`-1` 为无限循环
`scrolldelay`	整数	`0`	每次重复前的延迟（毫秒）
`scrollamount`	整数	`50`	滚动速度，越大越快
`circular`	布尔值	`true`	无缝滚动（`false` 则与 marquee 效果一样）
`drag`	布尔值	`true`	鼠标可拖动
`runshort`	布尔值	`true`	内容不足时是否滚动
`hoverstop`	布尔值	`true`	鼠标悬停时暂停
`inverthover`	布尔值	`false`	反向模式（默认不滚动，悬停时才滚动）

内置滚动表格 #

SmartChart 内置了一键生成滚动表格的功能，可在基础图形中直接选用，无需手写 HTML 结构。

自定义样式 #

如需修改滚动表格的字体、颜色、行高等样式，在模板的 CSS 区中覆盖以下类名：

/* 表头样式 */
.smtlisthead {
    background: #fff2cc;
    color: #333;
    height: 5rem;
}

.smtlisthead span {
    height: 5rem;
}

/* 表格主体区域（数据行容器） */
.smtlistnav {
    height: calc(100% - 5rem);
    color: #333;
    overflow: auto;
}

.smtlistnav li span {
    height: 3rem;
}

/* 奇数行背景色（偶数行将 odd 改为 even） */
.smtlistnav ul li:nth-child(odd) {
    background: rgba(100, 100, 100, .1);
}

指定单元格宽度对齐 #

当需要固定某列宽度时，在对应 <span> 上设置 width 和 flex-shrink:0：

<span>
    <span style="width:32rem; height:100%; flex-shrink:0; justify-content:left">列内容</span>
</span>

行点击联动（滚动列表） #

let lastClickDom, lastDomColor;

$('#smtlist__name__ li').unbind('click').click(function(params) {
    // 恢复上一次点击行的背景色
    try { lastClickDom.css('background', lastDomColor) } catch {}
    // 高亮当前行
    lastDomColor = $(this).css('background')
    $(this).css('background', 'rgba(24,144,255,0.15)')
    lastClickDom = $(this)
    // 获取第一列的值作为参数
    let myparam = $(this).children('span').eq(0).text()
    ds_setParam('item', myparam)
    ds_refresh(2)   // 联动刷新序号 2 的图形
})

行点击联动（普通表格） #

let lastClickDom, lastDomColor;

$('#container___name__ tr').unbind('click').click(function(params) {
    try { lastClickDom.css('background', lastDomColor) } catch {}
    lastDomColor = $(this).css('background')
    $(this).css('background', 'rgba(24,144,255,0.15)')
    lastClickDom = $(this)
    let myparam = $(this).children('td').eq(0).text()  // 取第一列值
    ds_setParam('item', myparam)
    ds_refresh(2)
})

简单原生滚动：`ds_scroll` #

ds_scroll 基于原生 CSS scrollTop 实现，适合简单的自动向下滚动场景（无缝衔接效果不如 ds_liMarquee）：

// 传入容器 id，interval 滚动间隔(ms)，step 每次滚动像素数
ds_scroll('#container___name__', 1000, 10)

参数	说明	默认值
`name`	容器选择器（id 或 class）	—
`interval`	滚动间隔（毫秒）	`1000`
`step`	每次滚动的像素数	`10`