LuLu UI hope主题中文文档 » SnapCell 滑动式单元格

安装与调用

单独使用直接引入 CSS：

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

引入 JS：

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

或者：

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

基本演示

滑动列表，显示后面因此的操作按钮。

固定的 HTML 使用结构为：

ui-scroll-snap-cell > ui-scroll-snap-item + button{1,}

列表内容1

列表内容2

<ui-list-item>
    <ui-scroll-snap-cell>
        <ui-scroll-snap-item href="###">列表内容1</ui-scroll-snap-item>
        <!-- 按钮 -->
        <button is="ui-button">标为未读</button>
        <button type="warning" is="ui-button">不显示</button>
        <button type="danger" is="ui-button">删除</button>
    </ui-scroll-snap-cell>
</ui-list-item>
<ui-list-item>
    <ui-scroll-snap-cell>
        <ui-scroll-snap-item href="###">列表内容2</ui-scroll-snap-item>
        <!-- 按钮 -->
        <button is="ui-button">标为未读</button>
        <button type="warning" is="ui-button">不显示</button>
        <button type="danger" is="ui-button">删除</button>
    </ui-scroll-snap-cell>
</ui-list-item>

本页贡献者：

zhangxinxu