123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- <import-sjs
- name="util"
- from="./index.sjs" />
- <view class="ant-swipe">
- <view
- class="ant-swipe-action"
- style="{{{ width: util.getWidth(rightWidth, leftWidth, inertiaWidth) }}}">
- <movable-area
- class="ant-swipe-action-movable"
- style="{{{
- marginLeft: util.getMarginLeft(rightWidth, leftWidth, inertiaWidth),
- }}}">
- <movable-view
- class="ant-swipe-action-movable-content"
- style="{{{
- width: util.getWidth2(rightWidth, leftWidth, inertiaWidth),
- marginLeft: util.getMarginLeft2(rightWidth, leftWidth, inertiaWidth)}}}"
- x="{{swipeX}}"
- data-type="content"
- animation="{{animation}}"
- damping="{{damping}}"
- direction="horizontal"
- out-of-bounds="{{ false }}"
- disabled="{{disabled}}"
- onTap="onSwipeTap"
- onChange="onChange"
- onChangeEnd="onChangeEnd"
- catchTouchEnd="onTouchEnd"
- onTouchCancel="onTouchCancel"
- catchTouchStart="onTouchStart">
- <view
- class="ant-swipe-action-movable-content-view"
- style="{{util.getSlotWidthStyle(rightWidth, leftWidth, _leftButtons, _rightButtons, inertiaWidth)}}"
- onTap="onClick">
- <view
- class="ant-swipe-action-movable-content-view-modal"
- a:if="{{swipedR || swipedL}}"></view>
- <slot />
- </view>
- </movable-view>
- <movable-view
- class="ant-swipe-action-movable-content {{`ant-swipe-action-movable-right-${$id}`}}"
- a:for="{{_rightButtons}}"
- a:for-item="item"
- a:for-index="idx"
- damping="{{damping}}"
- a:key="{{idx}}"
- style="{{{
- zIndex: tapTypeR === `R-${idx}` ? 1 : 0,
- marginLeft: util.getMarginLeft3(rightWidth, leftWidth, inertiaWidth),
- width: ((rightWidth - 0.1) / 2) + 'px' }}}"
- data-type="content"
- animation="{{false}}"
- disabled="{{true}}"
- direction="horizontal"
- x="{{moveX * (util.getMoveX(_rightButtons, idx) / rightWidth)}}">
- <view
- class="ant-swipe-action-movable-content-right"
- style="{{{background: item.bgColor,width: ((item.width + inertiaWidth + 1) / 2) + 'px'}}}">
- <view
- class="ant-swipe-action-movable-content-right-text"
- onTap="onItemTap"
- data-item="{{item, idx}}"
- aria-hidden="{{!swipedR}}"
- style="{{{
- fontSize: ((item.fontSize || 28) / 2) + 'px',
- color: item.color,
- background: item.bgColor,
- width: tapTypeR && tapTypeR === `R-${idx}` ? ((rightWidth + 1 + (item.confirmType === 'move' && inTouch ? inertiaWidth : 0)) / 2) + 'px' : `${item.width / 2}px`,
- ...(tapTypeR && tapTypeR === `R-${idx}` ? myStyle : {})
- }}}">
- <text
- class="right-text {{util.getLeft(tapTypeR, idx, _rightButtons, true)}}">
- {{tapTypeR && tapTypeR === `R-${idx}` ? (item.confirmText ||
- item.text) : item.text}}
- </text>
- </view>
- </view>
- </movable-view>
- <movable-view
- class="ant-swipe-action-movable-content ant-swipe-action-is-right-swipe {{`ant-swipe-action-movable-left-${$id}`}}"
- a:for="{{_leftButtons}}"
- a:for-item="itemL"
- a:for-index="idx"
- damping="{{damping}}"
- a:key="{{`left-${idx}`}}"
- style="{{{
- zIndex: tapTypeL === `L-${idx}` ? 1 : 0,
- marginLeft: `${inertiaWidth / 2}px`,
- width: ((leftWidth - 1) / 2) + 'px'}}}"
- data-type="content"
- animation="{{false}}"
- disabled="{{true}}"
- direction="horizontal"
- x="{{moveX * (util.getMoveX(_leftButtons, idx) / leftWidth)}}">
- <view
- class="ant-swipe-action-movable-content-left"
- style="{{{background: tapTypeL && tapTypeL === `L-${idx}` && _leftButtons.length === 3 && idx === 1 ? 'none' : itemL.bgColor,width: ((leftWidth + inertiaWidth) / 2) + 'px'}}}">
- <view
- class="ant-swipe-action-movable-content-left-text1 ant-swipe-action-left"
- onTap="onItemTap"
- data-item="{{itemL, idx}}"
- aria-hidden="{{!swipedL}}"
- style="{{{
- background: itemL.bgColor,
- height: `calc(100% + 2px)`,
- fontSize: ((itemL.fontSize || 28) / 2) + 'px',
- color: itemL.color,
- ...(tapTypeL && tapTypeL === `L-${idx}` ? myStyle : {}),
- width: tapTypeL && tapTypeL === `L-${idx}` ? ((leftWidth + 1 + (itemL.confirmType === 'move' && inTouch ? inertiaWidth : 0)) / 2) + 'px' : `${itemL.width / 2}px`,
- }}}">
- <text
- class="right-text"
- style="{{{ width: `100%` }}}">
- <text
- class="right-text {{util.getLeft(tapTypeL, idx, _leftButtons, false)}}">
- {{tapTypeL && tapTypeL === `L-${idx}` ? (itemL.confirmText ||
- itemL.text) : itemL.text}}
- </text>
- </text>
- </view>
- </view>
- </movable-view>
- </movable-area>
- </view>
- </view>
|