117 lines
5.0 KiB
Plaintext
117 lines
5.0 KiB
Plaintext
|
<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 />
|
||
|
|
<!-- {{ leftButtons.length+ 'dd' + rightButtons.length }} -->
|
||
|
|
</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>
|