LuLu UI hope主题中文文档 » SnapTab 滑动式选项卡

安装与调用

单独使用直接引入 CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/tab.css">

引入 JS：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/tab.js"></script>

或者：

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/ScrollSnap/tab.js';
</script>

基本演示

基本的 HTML 结构如下：

ui-scroll-snap-tab > (ui-tabs > ui-tab {1, }) + (ui-scroll-snap > ui-scroll-snap-item {1, })

详见下面的演示案例（移动端模式体验）：

标签1

标签2

标签3

标签4

标签5

标签6

标签7

标签8

内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

<ui-scroll-snap-tab>
    <ui-tabs>
        <ui-tab open>标签1</ui-tab>
        <ui-tab>标签2</ui-tab>
        <ui-tab>标签3</ui-tab>
        <ui-tab>标签4</ui-tab>
        <ui-tab disabled>标签5</ui-tab>
        <ui-tab>标签6</ui-tab>
        <ui-tab>标签7</ui-tab>
        <ui-tab>标签8</ui-tab>
    </ui-tabs>
    <ui-scroll-snap id="panel">
        <ui-scroll-snap-item>内容1</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容2</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容3</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容4</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容5</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容6</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容7</ui-scroll-snap-item>
        <ui-scroll-snap-item>内容8</ui-scroll-snap-item>
    </ui-scroll-snap>
<ui-scroll-snap-tab>

#panel {
    gap: 1rem;
    margin-top: 1rem;
}
#panel ui-scroll-snap-item {
    height: 300px;
    border-radius: 1rem;
    background-color: #f0f3f9;
    padding: 1rem;
}

如果 <ui-scroll-snap> 元素不是 <ui-scroll-snap-tab> 的子元素，则需要使用 target 属性进行关联，例如：

<ui-scroll-snap-tab target="panel">
    <ui-tabs>
        <ui-tab open>标签1</ui-tab>
        ...
    </ui-tabs>
<ui-scroll-snap-tab>
<ui-scroll-snap id="panel">
    <ui-scroll-snap-item>内容1</ui-scroll-snap-item>
    ...
</ui-scroll-snap>

事件处理

当选项卡切换的时候，会触发 <ui-scroll-snap-tab> 的 'switch' 事件，使用示意：

snapTab.addEventListener('switch', function (event) {
    // 选中项的索引值就是 event.detail.index            
});

本页贡献者：

zhangxinxu