移动端安卓和IOS开发框架Framework7教程-滑动操作列表（可滑动列表）

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

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

1. <div class="list-block">
2.   <ul>
3.     <!-- li上额外的“swipeout”类 -->
4.     <li class="swipeout">
5.       <!-- 被“swipeout-content”包裹起来的普通列表元素 -->
6.       <div class="swipeout-content">
7.         <!-- 你的列表元素放在这里 -->
8.         <div class="item-content">
9.           <div class="item-media">...</div>
10.           <div class="item-inner">...</div>
11.         </div>
12.       </div>
13.       <!-- Swipeout actions left -->
14.       <div class="swipeout-actions-left">
15.         <!-- Swipeout actions links/buttons -->
16.         <a href="#">Action 1</a>
17.         <a href="#">Action 2</a>
18.       </div>
19.       <!-- Swipeout actions right -->
20.       <div class="swipeout-actions-right">
21.         <!-- Swipeout actions links/buttons -->
22.         <a href="#">Action 1</a>
23.         <a class="swipeout-close" href="#">Action 2</a>
24.       </div>
25.     </li>
26.     ...
27.   </ul>
28. </div>

复制

其中：

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

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

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

1. <li class="swipeout">
2.   <div class="swipeout-content item-content">
3.     <div class="item-media">...</div>
4.     <div class="item-inner">...</div>
5.   </div>
6.   <div class="swipeout-actions-right">
7.     <a href="#">Action 1</a>
8.     <a href="#">Action 2</a>
9.   </div>
10. </li>

复制

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

1. <li class="swipeout">
2.   <a href="#" class="swipeout-content item-content item-link">
3.     <div class="item-media">...</div>
4.     <div class="item-inner">...</div>
5.   </a>
6.   <div class="swipeout-actions-right">
7.     <a href="#">Action 1</a>
8.     <a href="#">Action 2</a>
9.   </div>
10. </li>

复制

示例

1. <!-- On right side -->
2. <div class="list-block">
3.   <ul>
4.     <li class="swipeout">
5.       <div class="swipeout-content item-content">
6.         <div class="item-media">...</div>
7.         <div class="item-inner">...</div>
8.       </div>
9.       <div class="swipeout-actions-right">
10.         <a href="#" class="action1">Action 1</a>
11.       </div>
12.     </li>
13.     <li class="swipeout">
14.       <div class="swipeout-content item-content">
15.         <div class="item-media">...</div>
16.         <div class="item-inner">...</div>
17.       </div>
18.       <div class="swipeout-actions-right">
19.         <a href="#" class="action1 bg-orange">Action 1</a>
20.         <a href="#" class="action2">Action 2</a>
21.       </div>
22.     </li>
23.     ...
24.   </ul>
25. </div>
26.  
27. <!-- On left side -->
28. <div class="list-block">
29.   <ul>
30.     <li class="swipeout">
31.       <div class="swipeout-content item-content">
32.         <div class="item-media">...</div>
33.         <div class="item-inner">...</div>
34.       </div>
35.       <div class="swipeout-actions-left">
36.         <a href="#" class="action1">Action 1</a>
37.       </div>
38.     </li>
39.     <li class="swipeout">
40.       <div class="swipeout-content item-content">
41.         <div class="item-media">...</div>
42.         <div class="item-inner">...</div>
43.       </div>
44.       <div class="swipeout-actions-left">
45.         <a href="#" class="action1 bg-orange">Action 1</a>
46.         <a href="#" class="action2">Action 2</a>
47.       </div>
48.     </li>
49.     ...
50.   </ul>
51. </div>
52.  
53. <!-- On both sides -->
54. <div class="list-block">
55.   <ul>
56.     <li class="swipeout">
57.       <div class="swipeout-content item-content">
58.         <div class="item-media">...</div>
59.         <div class="item-inner">...</div>
60.       </div>
61.       <div class="swipeout-actions-left">
62.         <a href="#" class="action1">Action L1</a>
63.       </div>
64.       <div class="swipeout-actions-right">
65.         <a href="#" class="action1">Action R1</a>
66.       </div>
67.     </li>
68.     <li class="swipeout">
69.       <div class="swipeout-content item-content">
70.         <div class="item-media">...</div>
71.         <div class="item-inner">...</div>
72.       </div>
73.       <div class="swipeout-actions-left">
74.         <a href="#" class="action1 bg-pink">Action L1</a>
75.         <a href="#" class="action2 bg-lightblue">Action L2</a>
76.       </div>
77.       <div class="swipeout-actions-right">
78.         <a href="#" class="action1 bg-orange">Action R1</a>
79.         <a href="#" class="action2">Action R2</a>
80.       </div>
81.     </li>
82.     ...
83.   </ul>
84. </div>

复制

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. $$('.action1').on('click', function () {
6.   myApp.alert('Action 1');
7. });
8. $$('.action2').on('click', function () {
9.   myApp.alert('Action 2');
10. });

复制

实例预览

滑动删除（Swipe To Delete）

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

1. <li class="swipeout">
2.   <div class="swipeout-content item-content">
3.     <div class="item-media">...</div>
4.     <div class="item-inner">...</div>
5.   </div>
6.   <div class="swipeout-actions-right">
7.     <!-- Add this button and item will be deleted automatically -->
8.     <a href="#" class="swipeout-delete">Delete</a>
9.   </div>
10. </li>
    复制

 

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

1. <li class="swipeout">
2.   <div class="swipeout-content item-content">
3.     <div class="item-media">...</div>
4.     <div class="item-inner">...</div>
5.   </div>
6.   <div class="swipeout-actions-right">
7.     <!-- We add data-confirm and data-confirm-title attributes -->
8.     <a href="#" class="swipeout-delete" data-confirm="Are you sure want to delete this item?" data-confirm-title="Delete?">Delete</a>
9.     </div>
10.   </div>
11. </li>
    复制

实例预览

滑动距离过长(swipeover)

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

1. <li class="swipeout">
2.   <div class="swipeout-content item-content">
3.     <div class="item-media">...</div>
4.     <div class="item-inner">...</div>
5.   </div>
6.   <div class="swipeout-actions-right">
7.     <a href="#">More</a>
8.     <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
9.     </div>
10.   </div>
11. </li>
    复制

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

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

1. <li class="swipeout">
2.   <div class="swipeout-content">
3.     <a href="#" class="item-content item-link">
4.       <div class="item-inner">
5.         <div class="item-title-row">
6.           <div class="item-title">Facebook</div>
7.           <div class="item-after">17:14</div>
8.         </div>
9.         <div class="item-subtitle">New messages from John Doe</div>
10.         <div class="item-text">Lorem ipsum ...</div>
11.       </div>
12.     </a>
13.   </div>
14.   <div class="swipeout-actions-left">
15.     <a href="#" class="swipeout-overswipe bg-green reply">Reply</a>
16.     <a href="#" class="bg-blue forward">Forward</a>
17.   </div>
18.   <div class="swipeout-actions-right">
19.     <a href="#" class="mark bg-orange">Mark</a>
20.     <a href="#" class="swipeout-delete swipeout-overswipe">Delete</a>
21.   </div>
22. </li>
    复制

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. $$('.mark').on('click', function () {
6.   myApp.alert('Mark');
7. });
8. $$('.reply').on('click', function () {
9.   myApp.alert('Reply');
10. });
11. $$('.forward').on('click', function () {
12.   myApp.alert('Forward');
13. });
    复制

实例预览

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">	当滑动列表元素被删除后触发

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. $$('.swipeout').on('deleted', function () {
6.   myApp.alert('Item removed');
7. });
8.  
9. $$('.swipeout').on('swipeout', function (e) {
10.   console.log('Item opened on: ' + e.detail.progress + '%');
11. });
    复制

实例预览