无缝滚动

通用滚动 #

例如你的html如下

<div id="smtid" style="height:100%">
    <ul>
        <li>smartchart</li>
        <li>bigdata</li>
        <li>echarts</li>
        <li>make it great</li>
    </ul>
</div>

你只需要使用以下函数, 即可实现在无缝滚动 由于smtid是ID, 则使用 ds_liMarquee(’#smtid’) 即可开启自动滚动 如果 class=“smtclass”, 那么也可以使用类选择器 ds_liMarquee(’.smtclass')

我们也可以使用更多的配置方法

 marconfig={
    playtime: 3000, //滚动3秒
    pausetime: 3000, //停3秒
    config:{
        direction: 'up',//向上滚动
        runshort: false,//内容不足时不滚动
        scrollamount: 20//速度
    }
 }

可以使用 ds_liMarquee(’#smtid’, marconfig) 传入配置

更多config说明:

名称 类型 默认值 说明
direction 字符串 left 滚动方向,可选 left / right / up / down
loop 整数 -1 循环次数,-1 为无限循环
scrolldelay 整数 0 每次重复之前的延迟
scrollamount 整数 50 滚动速度,越大越快
circular 布尔值 true 无缝滚动,如果为 false,则和 marquee 效果一样
drag 布尔值 true 鼠标可拖动
runshort 布尔值 true 内容不足是否滚动
hoverstop 布尔值 true 鼠标悬停暂停
xml 布尔值 false 加载xml 文件
inverthover 布尔值 false 反向,即默认不滚动,鼠标悬停滚动

内置滚动表格 #

smartchart内置了滚动表格, 可以一键生成 如果你需要修改表格的样式, 如字体,颜色等, 你可以在模板中重定义样式 具体样式的写法, 参考 样式快速入门

如下例修改表头高度为5rem, 内容单元格高度3rem 及背景字体等
/*表头样式*/
.smtlisthead{
    background: #fff2cc;
    color: red;
    height: 5rem;
}

.smtlisthead span{
    height: 5rem;
}

/*表格本体样式*/
.smtlistnav{
    height: calc(100% - 5rem);
    color: red;
    overflow: auto;
}

.smtlistnav li span{
    height: 3rem;
}


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

/*指定某单独格宽度对齐*/
<span>
  <span style="width:32rem;height:100%;flex-shrink:0;justify-content:left"><span>
</span>

/*单元格点击响应*/
let lastClickDom;
let lastDomColor;
$('#smtlist__name__, li').click(function(params){
    try{lastClickDom.css('background', lastDomColor)}catch{}
    lastDomColor = $(this).css('background');
    $(this).css('background', 'yellow');
    lastClickDom = $(this);
    let myparam = $(this).children('span').eq(0).text(); //获取点击的参数
    //以下加入你的action
    
});