LuLu UI Edge版中文文档 » 静态控件之文本框

安装与调用

单独使用直接引入 CSS：

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

引入 JS：

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

或者：

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

基本演示

<ui-scroll-snap> 元素的外面包裹 <ui-scroll-snap-swipe> 元素即可实现水平式滑动切换效果。

如果希望自动播放，设置 autoplay 属性值，默认是 3000ms，可以指定具体的轮播时间，例如 autoplay="4000" 表示轮播时间间隔是 4s。

请在移动端模式下体验下面的交互效果。

<ui-scroll-snap-swipe autoplay>
    <ui-scroll-snap>
        <ui-scroll-snap-item href="snap-swipe.html">
            <img src="1.jpg">
        </ui-scroll-snap-item>
        <ui-scroll-snap-item href="snap-swipe.html">
            <img src="2.jpg">
        </ui-scroll-snap-item>
        <ui-scroll-snap-item href="snap-swipe.html">
            <img src="3.jpg">
        </ui-scroll-snap-item>
        <ui-scroll-snap-item href="snap-swipe.html">
            <img src="4.jpg">
        </ui-scroll-snap-item>
    </ui-scroll-snap>
</ui-scroll-snap-swipe>

一些说明

ui-scroll-snap-swipe 元素做了以下一些事情，设置 <ui-scroll-snap> 元素的 type 类型是 'x mandatory'，设置 loop 为 true，使其同方法可以无限轮播，创建小圆点状态栏元素，添加定时滚动的能力。