全部产品

可滑动单元格(SwipeAction)

更新时间:2020-03-26 15:13:40

本文介绍可滑动单元格(SwipeAction)。

属性名 描述 类型 默认值
className 自定义class String -
right 滑动选项,最多两项 Array[Object{type: edit/delete, text: string}] []
onRightItemClick 点击滑动选项 ({index, detail, extra, done}) => void 调用done从而使swipe-action合上
restore 还原组件到初始状态,当有多个 swipe-action 组件时,当滑动其中一个时,需要将其他的组件的 restore 属性设置为 true,避免一个页面同时存在多个 swipeAction 处于活动状态。 Boolean false
onSwipeStart 开始滑动回调 (e: Object) => void -
extra 附属信息,会在 onRightItemClick 回调中获取 any -

代码示例

  1. {
  2. "defaultTitle": "SwipeAction",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "swipe-action": "mini-antui/es/swipe-action/index"
  7. }
  8. }
  1. <view>
  2. <list>
  3. <view a:for="{{list}}" key="{{item.content}}">
  4. <swipe-action
  5. index="{{index}}"
  6. restore="{{swipeIndex === null || swipeIndex !== index}}"
  7. right="{{item.right}}"
  8. onRightItemClick="onRightItemClick"
  9. onSwipeStart="onSwipeStart"
  10. extra="item{{index}}"
  11. >
  12. <list-item
  13. arrow="horizontal"
  14. index="{{index}}"
  15. key="items-{{index}}"
  16. onClick="onItemClick"
  17. last="{{index === list.length - 1}}"
  18. >
  19. {{item.content}}
  20. </list-item>
  21. </swipe-action>
  22. </view>
  23. </list>
  24. </view>
  1. Page({
  2. data: {
  3. swipeIndex: null,
  4. list: [
  5. { right: [{ type: 'delete', text: '删除' }], content: 'AAA' },
  6. { right: [{ type: 'edit', text: '取消收藏' }, { type: 'delete', text: '删除' }], content: 'BBB' },
  7. { right: [{ type: 'delete', text: '删除' }], content: 'CCC' },
  8. ],
  9. },
  10. onRightItemClick(e) {
  11. const { type } = e.detail;
  12. my.confirm({
  13. title: '温馨提示',
  14. content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
  15. confirmButtonText: '确定',
  16. cancelButtonText: '取消',
  17. success: (result) => {
  18. const { list } = this.data;
  19. if (result.confirm) {
  20. if (type === 'delete') {
  21. list.splice(this.data.swipeIndex, 1);
  22. this.setData({
  23. list: [...list],
  24. });
  25. }
  26. my.showToast({
  27. content: '确定 => 执行滑动删除还原',
  28. });
  29. e.done();
  30. } else {
  31. my.showToast({
  32. content: '取消 => 滑动删除状态保持不变',
  33. });
  34. }
  35. },
  36. });
  37. },
  38. onItemClick(e) {
  39. my.alert({
  40. content: `dada${e.index}`,
  41. });
  42. },
  43. onSwipeStart(e) {
  44. this.setData({
  45. swipeIndex: e.index,
  46. });
  47. },
  48. });