1. 首页
  2. 卡片 Card
  3. card-roll 滚动卡

卡片 · card-roll 滚动卡

滚动卡 card-roll:无缝滚动窗——100% 全尺寸 + overflow:hidden,内部 roll-win 位移容器,条目 roll-item 相对定位、active 项主色高亮;roll-none 变体横向单行(win 全宽滚动、item 行内排列)。速度 / 方向由引擎参数接管。
本页内容 结构 注意项

结构

<div class="card card-roll" data-direct="vertical"> <div class="roll-win"> <div class="roll-content"> <div class="roll-item">数据 1</div> <div class="roll-item active">数据 2</div> </div> </div> </div> <div class="card card-roll roll-none"> <div class="roll-win"><div class="roll-content"> <div class="roll-item">横向项</div> </div></div> </div>
data-direct方向:vertical 纵向 / roll-none 横向单行
roll-win位移层,滚动动画作用于此
roll-item.active当前项主色高亮(红/主色双定义,主色生效)

注意项

a: 由引擎自动初始化并持续滚动(页面内裸放会动,故用代码块演示)。 b: 联系式滚动需把内容复制一份实现无缝;速度在初始化参数中配置。 c: roll-none 适合横向跑分 / 公告条(win 全宽、内容 max-content)。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页