LuLu UI Edge版中文文档 » ScrollSnap 滚动交互组件

安装与调用

单独使用直接引入 CSS：

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

引入 JS：

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

或者：

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

基本演示

使用 <ui-scroll-snap> 自定义组件元素，列表元素使用 <ui-scroll-snap-item> 元素。

<ui-scroll-snap>
    <!-- 列表这里 -->
    <ui-scroll-snap-item>上海</ui-scroll-snap-item>
    <ui-scroll-snap-item>...</ui-scroll-snap-item>
    ...
</ui-scroll-snap>

默认是居中吸附，隐藏了滚动条。

一些参数

可以通过 type 指定滚动方向以及是否强制吸附，和原生的 scroll-snap-type 属性一致。

<!-- 水平滚动定位 -->
<ui-scroll-snap type="x"></ui-scroll-snap>

循环滚动

设置 loop 属性可以让列表中的内容循环滚动，示意：

<ui-scroll-snap loop>...</ui-scroll-snap>