返回介绍

滚动条

发布于 2019-05-26 16:28:27 字数 4629 浏览 982 评论 0 收藏 0

创建一个可以作为响应式旋转木马滚动条的条目列表。

滚动条能响应式地显示元素,可以通过鼠标和触摸手势滚动。

用法

要使用滚动条组件,需要为包含 .uk-slider-container 元素的容器元素添加 data-uk-slider 属性。添加条目的列表,并为此列表添加 .uk-slider 类。使用 .uk-width-*.uk-grid-width-* 类以确定每次显示多少个元素。

注意 使用此组件需要额外添加 slider.css 文件,在css/components文件夹中。此组件需要额外添加 slider.js 文件,在js/components文件夹中。

<div data-uk-slider>
    <div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4">
    <li>...</li>
    ...
</ul>
    </div>
</div>

导航/Navigation

滚动条本身可以使用鼠标点击和拖拽或者触屏设备中滑动进行滚动。添加一个可以点击的滑动导航也是个好主意。滑动导航添加的箭头按钮会在鼠标悬停在滑动条上时显示出来。

<div class="uk-slidenav-position" data-uk-slider>
    <div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4">
    <li>...</li>
    ...
</ul>
    </div>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>
</div>

居中模式/Center Mode

默认情况下,滚动条的元素总是对齐滚动条容易的左边缘。如果你想让元素居中,设置 center 属性的值为 true 即可。

注意 被居中的列表元素通常会被添加 .uk-active 类。如果你想高亮显示居中的元素,添加该类名即可。

<div data-uk-slider="{center:true}">
    <div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4">
    <li>...</li>
    ...
</ul>
    </div>
</div>

禁用无限滚动

默认情况下,滚动条循环显示所有条目。要禁用这种行为,设置 infinite 参数为 false 即可。在启用或禁用居中模式中都同样有效。

<div data-uk-slider="{infinite: false}">
    <div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4">
    <li>...</li>
    ...
</ul>
    </div>
</div>

条目排水沟/Item gutter

如果你想为滚动条中的元素添加间距,添加 .uk-grid 类到滚动条容器即可。元素将会根据网格排水沟尺寸被分隔开。

注意 你可以使用网格的修饰类 uk-grid-mediumuk-grid-small 来调整排水沟的尺寸。

条目宽度/Item width

如果要设置滚动条中各元素的宽度,使用 UIkit 网格中的宽度类即可。既可以在滚动条容器上使用 uk-grid-width-* 类名,也可以为列表中每个条目单独使用 uk-width-* 类名。

Example: 为条目单独设置宽度

<div data-uk-slider>
    <div class="uk-slider-container">
<ul class="uk-slider">
    <li class="uk-width-1-3">...</li>
    <li class="uk-width-1-5">...</li>
    <li class="uk-width-2-5">...</li>
    ...
</ul>
    </div>
</div>

响应式行为

为了适应不同的视口,你可以使用网格的响应式类名。在下面的例子中,滚动条会在大视口中显示4个条目,在中视口中显示3个,在小视口中显示一个。

<div data-uk-slider>
    <div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-3 uk-grid-width-large-1-4">
    <li>...</li>
    ...
</ul>
    </div>
</div>

全屏模式

滚动条包含全屏模式,在全屏模式下,滚动条将延伸至100%的视口高度。

<div data-uk-slider>
    <div class="uk-slider-container">
<ul class="uk-slider uk-slider-fullscreen">
    <li>...</li>
    ...
</ul>
    </div>
</div>

JavaScript 选项

选项可用值默认值描述
centerbooleanfalse条目居中模式
thresholdbooleantrue移动鼠标触发元素拖动的阈值,以像素为单位。
infinitebooleantrue无限滚动
activeclsstringuk-active在居中模式中,添加到被选中条目上的类名。
autoplayfalseboolean是否让滚动条的内容条目自动切换
pauseOnHoverbooleantrue鼠标悬停在滚动条上时暂停播放
autoplayIntervalinteger7000切换滚动条内容条目的时间间隔

手动初始化元素

var slider = UIkit.slider(element, { /* options */ });

事件/Events

事件名Parameter描述
focus.uikit.sliderevent, index, item条目获得焦点时触发

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文