通用滚动 #
例如你的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
});