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

示例

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>
    复制

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）

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

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. });
    复制

实例预览

?

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

原文：http://zaixianshouce.iteye.com/blog/2304791