index.axml 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <import-sjs
  2. from="./index.sjs"
  3. name="util" />
  4. <view class="ant-swipe">
  5. <view
  6. class="ant-swipe-action"
  7. style="width: {{ util.getWidth(rightWidth, leftWidth, inertiaWidth) }};">
  8. <movable-area
  9. a:if="{{ ready }}"
  10. class="ant-swipe-action-movable"
  11. style="margin-left: {{ util.getMarginLeft(rightWidth, leftWidth, inertiaWidth) }}">
  12. <movable-view
  13. class="ant-swipe-action-movable-content"
  14. style="width:{{ util.getWidth2(rightWidth, leftWidth, inertiaWidth) }}; margin-left: {{ util.getMarginLeft2(rightWidth, leftWidth, inertiaWidth) }};"
  15. x="{{ swipeX }}"
  16. data-type="content"
  17. animation="{{ animation }}"
  18. damping="{{ damping }}"
  19. direction="horizontal"
  20. out-of-bounds="{{ false }}"
  21. disabled="{{ disabled }}"
  22. onTap="onSwipeTap"
  23. onChange="onChange"
  24. onChangeEnd="onChangeEnd"
  25. catchTouchEnd="onTouchEnd"
  26. onTouchCancel="onTouchCancel"
  27. catchTouchStart="onTouchStart">
  28. <view
  29. class="ant-swipe-action-movable-content-view"
  30. style="{{ util.getSlotWidthStyle(rightWidth, leftWidth, _leftButtons, _rightButtons, inertiaWidth) }}"
  31. onTap="onClick">
  32. <view
  33. a:if="{{ swipedR || swipedL }}"
  34. class="ant-swipe-action-movable-content-view-modal" />
  35. <slot />
  36. </view>
  37. </movable-view>
  38. <movable-view
  39. class="ant-swipe-action-movable-content ant-swipe-action-movable-right{{ $id ? '-' + $id : '' }}"
  40. a:for="{{ _rightButtons }}"
  41. a:for-item="item"
  42. a:for-index="idx"
  43. damping="{{ damping }}"
  44. a:key="{{ idx }}"
  45. style="{{ util.getRightMovableContentStyle(tapTypeR, idx, rightWidth, leftWidth, inertiaWidth) }}"
  46. data-type="content"
  47. animation="{{ false }}"
  48. disabled="{{ true }}"
  49. direction="horizontal"
  50. x="{{ moveX * (util.getMoveX(_rightButtons, idx) / rightWidth) }}">
  51. <view
  52. class="ant-swipe-action-movable-content-right"
  53. style="background: {{ item.bgColor }};width: {{ (item.width + inertiaWidth + 1) / 2 }}px;">
  54. <view
  55. class="ant-swipe-action-movable-content-right-text"
  56. onTap="onItemTap"
  57. data-item="{{ util.axmlObj({ item, idx }) }}"
  58. aria-hidden="{{ !swipedR }}"
  59. style="{{ util.getMovableContentRightStyle(item, tapTypeR, idx, rightWidth, inTouch, inertiaWidth, myStyle) }}">
  60. <slot name="{{ util.getRightSlotName(tapTypeR, idx, item) }}">
  61. <!-- display: inline -->
  62. <text
  63. class="right-text {{ util.getLeft(tapTypeR, idx, _rightButtons, true) }}"
  64. >{{ util.getRightText(tapTypeR, idx, item) }}</text
  65. >
  66. </slot>
  67. </view>
  68. </view>
  69. </movable-view>
  70. <movable-view
  71. class="ant-swipe-action-movable-content ant-swipe-action-is-right-swipe ant-swipe-action-movable-left{{ $id ? '-' + $id : '' }}"
  72. a:for="{{ _leftButtons }}"
  73. a:for-item="itemL"
  74. a:for-index="idx"
  75. a:key="left-{{ idx }}"
  76. damping="{{ damping }}"
  77. style="{{ util.getLeftMovableContentStyle(tapTypeL, idx, leftWidth, inertiaWidth) }}"
  78. data-type="content"
  79. animation="{{ false }}"
  80. disabled="{{ true }}"
  81. direction="horizontal"
  82. x="{{ moveX * (util.getMoveX(_leftButtons, idx) / leftWidth) }}">
  83. <view
  84. class="ant-swipe-action-movable-content-left"
  85. style="background: {{ tapTypeL && tapTypeL === 'L-' + idx && _leftButtons.length === 3 && idx === 1 ? 'none' : itemL.bgColor }};width: {{ (leftWidth + inertiaWidth) / 2 }}px">
  86. <view
  87. class="ant-swipe-action-movable-content-left-text1 ant-swipe-action-left"
  88. onTap="onItemTap"
  89. data-item="{{ util.axmlObj({ itemL, idx }) }}"
  90. aria-hidden="{{ !swipedL }}"
  91. style="{{ util.getMovableContentLeftStyle(itemL, tapTypeL, idx, leftWidth, inTouch, inertiaWidth, myStyle) }}">
  92. <slot name="{{ util.getLeftSlotName(tapTypeL, idx, itemL) }}">
  93. <!-- display: inline -->
  94. <text
  95. class="right-text"
  96. style="width: 100%"
  97. ><!-- display: inline -->
  98. <text
  99. class="right-text {{ util.getLeft(tapTypeL, idx, _leftButtons, false) }}"
  100. >{{ util.getLeftText(tapTypeL, idx, itemL) }}</text
  101. ></text
  102. >
  103. </slot>
  104. </view>
  105. </view>
  106. </movable-view>
  107. </movable-area>
  108. </view>
  109. </view>