滑动操作列表（可滑动列表）

优质

小牛编辑

139浏览

2023-12-01

滑动操作列表是列表的扩展，它提供滑动操作的功能，滑动列表元素可以展现隐藏的功能菜单，就像滑动删除一样。

让我们来看一下滑动列表元素的布局结构：

<div class="list-block">
  <ul>
    <!-- li上额外的“swipeout”类 -->
    <li class="swipeout">
      <!-- 被“swipeout-content”包裹起来的普通列表元素 -->
      <div class="swipeout-content">
        <!-- 你的列表元素放在这里 -->
        <div class="item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
        </div>
      </div>
      <!-- Swipeout actions left -->
      <div class="swipeout-actions-left">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a href="#">Action 2</a>
      </div>
      <!-- Swipeout actions right -->
      <div class="swipeout-actions-right">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a class="swipeout-close" href="#">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>

其中：

swipeout-content - 列表元素的容器，它会随着滑动操作移动
swipeout-actions-left - 向左滑动的按钮和链接的容器
swipeout-actions-right - 向左滑动的按钮和链接的容器
swipeout-close - 一个可选的链接，点击之后会关闭

注意，swipeout-content和swipeout-actions-left/right应该是<li>的直接子元素

如果只含有“item-content”类的子元素，可以将“item-content”类加到“swipeout-content”元素上，以简化结构：

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</li>

如果使用的是链接元素，你可以将上述的类都加到链接元素上：

<li class="swipeout">
  <a href="#" class="swipeout-content item-content item-link">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </a>
  <div class="swipeout-actions-right">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</li>

示例

<!-- On right side -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1">Action 1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1 bg-orange">Action 1</a>
        <a href="#" class="action2">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>
 
<!-- On left side -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1">Action 1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1 bg-orange">Action 1</a>
        <a href="#" class="action2">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>
 
<!-- On both sides -->
<div class="list-block">
  <ul>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1">Action L1</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1">Action R1</a>
      </div>
    </li>
    <li class="swipeout">
      <div class="swipeout-content item-content">
        <div class="item-media">...</div>
        <div class="item-inner">...</div>
      </div>
      <div class="swipeout-actions-left">
        <a href="#" class="action1 bg-pink">Action L1</a>
        <a href="#" class="action2 bg-lightblue">Action L2</a>
      </div>
      <div class="swipeout-actions-right">
        <a href="#" class="action1 bg-orange">Action R1</a>
        <a href="#" class="action2">Action R2</a>
      </div>
    </li>
    ...
  </ul>
</div>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.action1').on('click', function () {
  myApp.alert('Action 1');
});
$$('.action2').on('click', function () {
  myApp.alert('Action 2');
});

滑动删除（Swipe To Delete）

在Framework7中使用滑动删除不需要写Javascript代码，只需要将<a class="swipeout-delete">链接加入到滑动菜单中的按钮上：

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <!-- Add this button and item will be deleted automatically -->
    <a href="#" class="swipeout-delete">Delete</a>
  </div>
</li>

可以在点击删除按钮的时候调用确认询问模态窗口（Confirm modal），只有在确认后才会将需要删除的元素从列表中移除。使用确认功能只需要把“data-confirm”和“data-confirm-title”(可选)属性加到删除菜单链接（<a class="swipeout-delete">）上：

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <!-- We add data-confirm and data-confirm-title attributes -->
    <a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?">Delete</a>
    </div>
  </div>
</li>

滑动距离过长(swipeover)

当滑动距离过长的时候，可以通过 swipeout-overswipe 类来制定一个操作按钮。

<li class="swipeout">
  <div class="swipeout-content item-content">
    <div class="item-media">...</div>
    <div class="item-inner">...</div>
  </div>
  <div class="swipeout-actions-right">
    <a href="#">More</a>
    <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
    </div>
  </div>
</li>

overswipe 只能用在右滑的最后一个按钮或者左滑的第一个按钮。

overswipe 的时候会自动在overswipe按钮上触发click事件，所以你需要在该按钮上绑定正确的事件监听。

<li class="swipeout">
  <div class="swipeout-content">
    <a href="#" class="item-content item-link">
      <div class="item-inner">
        <div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum ...</div>
      </div>
    </a>
  </div>
  <div class="swipeout-actions-left">
    <a href="#" class="swipeout-overswipe bg-green reply">Reply</a>
    <a href="#" class="bg-blue forward">Forward</a>
  </div>
  <div class="swipeout-actions-right">
    <a href="#" class="mark bg-orange">Mark</a>
    <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
  </div>
</li>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.mark').on('click', function () {
  myApp.alert('Mark');
});
$$('.reply').on('click', function () {
  myApp.alert('Reply');
});
$$('.forward').on('click', function () {
  myApp.alert('Forward');
});

Swipeout JavaScript API

Swipeouts 有丰富的JS API可以用来控制里面的元素：

myApp.swipeoutOpen(el) - 在指定的元素中显示滑动菜单

el - 带有“swipeout”类的列表元素（<li>）的DOM节点或CSS选择器。必选的
direction - 滑动方向，字符串 (可以是 "left" 或者 "right"). 如果一个条目同时有左滑和右滑操作，那么你必须指定这个参数. 可选
callback - function - 回调函数，打开动画完成之后执行。

myApp.swipeoutClose(el) - 在指定的元素中隐藏滑动菜单

el - 带有“swipeout”类的列表元素（<li>）的DOM节点或CSS选择器。必选的
callback - function - 回调函数，关闭动画完成之后执行。

myApp.swipeoutDelete(el) - 删除指定的滑动列表中的元素

el - 带有“swipeout”类的列表元素（<li>）的DOM节点或CSS选择器。必选的
callback - function - 回调函数，完成动画后删除DOM前执行。

myApp.swipeoutOpenedEl - 属性（property）。包含已打开的滑动列表元素。当没有滑动列表中的元素被打开，返回undefined

滑动列表事件（Swipeout events）

滑动列表元素会触发以下事件:

事件（Event）	目标（Target）	说明（Description）
swipeout	滑动列表元素<li class="swipeout">	当滑动列表元素被移动时触发，event.detail.progress表示当前打开的菜单的开启进度
open	滑动列表元素<li class="swipeout">	当滑动列表元素开始显示时触发
opened	滑动列表元素<li class="swipeout">	当滑动列表元素完成显示时触发
close	滑动列表元素<li class="swipeout">	当滑动列表元素开始隐藏时触发
closed	滑动列表元素<li class="swipeout">	当滑动列表元素完成隐藏时触发
delete	滑动列表元素<li class="swipeout">	当滑动列表元素开始删除操作时触发
deleted	滑动列表元素<li class="swipeout">	当滑动列表元素被删除后触发

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.swipeout').on('deleted', function () {
  myApp.alert('Item removed');
});
 
$$('.swipeout').on('swipeout', function (e) {
  console.log('Item opened on: ' + e.detail.progress + '%');
});