4 changed files with 0 additions and 149 deletions
Unified View
Diff Options
-
132components/swipe-cell/index.js
-
3components/swipe-cell/index.json
-
13components/swipe-cell/index.wxml
-
1components/swipe-cell/index.wxss
@ -1,132 +0,0 @@ |
|||||
import { VantComponent } from '../common/component'; |
|
||||
import { touch } from '../mixins/touch'; |
|
||||
import { range } from '../common/utils'; |
|
||||
const THRESHOLD = 0.3; |
|
||||
let ARRAY = []; |
|
||||
VantComponent({ |
|
||||
props: { |
|
||||
disabled: Boolean, |
|
||||
leftWidth: { |
|
||||
type: Number, |
|
||||
value: 0, |
|
||||
observer(leftWidth = 0) { |
|
||||
if (this.offset > 0) { |
|
||||
this.swipeMove(leftWidth); |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
rightWidth: { |
|
||||
type: Number, |
|
||||
value: 0, |
|
||||
observer(rightWidth = 0) { |
|
||||
if (this.offset < 0) { |
|
||||
this.swipeMove(-rightWidth); |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
asyncClose: Boolean, |
|
||||
name: { |
|
||||
type: null, |
|
||||
value: '', |
|
||||
}, |
|
||||
}, |
|
||||
mixins: [touch], |
|
||||
data: { |
|
||||
catchMove: false, |
|
||||
wrapperStyle: '', |
|
||||
}, |
|
||||
created() { |
|
||||
this.offset = 0; |
|
||||
ARRAY.push(this); |
|
||||
}, |
|
||||
destroyed() { |
|
||||
ARRAY = ARRAY.filter((item) => item !== this); |
|
||||
}, |
|
||||
methods: { |
|
||||
open(position) { |
|
||||
const { leftWidth, rightWidth } = this.data; |
|
||||
const offset = position === 'left' ? leftWidth : -rightWidth; |
|
||||
this.swipeMove(offset); |
|
||||
this.$emit('open', { |
|
||||
position, |
|
||||
name: this.data.name, |
|
||||
}); |
|
||||
}, |
|
||||
close() { |
|
||||
this.swipeMove(0); |
|
||||
}, |
|
||||
swipeMove(offset = 0) { |
|
||||
this.offset = range(offset, -this.data.rightWidth, this.data.leftWidth); |
|
||||
const transform = `translate3d(${this.offset}px, 0, 0)`; |
|
||||
const transition = this.dragging |
|
||||
? 'none' |
|
||||
: 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)'; |
|
||||
this.setData({ |
|
||||
wrapperStyle: `
|
|
||||
-webkit-transform: ${transform}; |
|
||||
-webkit-transition: ${transition}; |
|
||||
transform: ${transform}; |
|
||||
transition: ${transition}; |
|
||||
`,
|
|
||||
}); |
|
||||
}, |
|
||||
swipeLeaveTransition() { |
|
||||
const { leftWidth, rightWidth } = this.data; |
|
||||
const { offset } = this; |
|
||||
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) { |
|
||||
this.open('right'); |
|
||||
} else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) { |
|
||||
this.open('left'); |
|
||||
} else { |
|
||||
this.swipeMove(0); |
|
||||
} |
|
||||
this.setData({ catchMove: false }); |
|
||||
}, |
|
||||
startDrag(event) { |
|
||||
if (this.data.disabled) { |
|
||||
return; |
|
||||
} |
|
||||
this.startOffset = this.offset; |
|
||||
this.touchStart(event); |
|
||||
}, |
|
||||
noop() {}, |
|
||||
onDrag(event) { |
|
||||
if (this.data.disabled) { |
|
||||
return; |
|
||||
} |
|
||||
this.touchMove(event); |
|
||||
if (this.direction !== 'horizontal') { |
|
||||
return; |
|
||||
} |
|
||||
this.dragging = true; |
|
||||
ARRAY.filter( |
|
||||
(item) => item !== this && item.offset !== 0 |
|
||||
).forEach((item) => item.close()); |
|
||||
this.setData({ catchMove: true }); |
|
||||
this.swipeMove(this.startOffset + this.deltaX); |
|
||||
}, |
|
||||
endDrag() { |
|
||||
if (this.data.disabled) { |
|
||||
return; |
|
||||
} |
|
||||
this.dragging = false; |
|
||||
this.swipeLeaveTransition(); |
|
||||
}, |
|
||||
onClick(event) { |
|
||||
const { key: position = 'outside' } = event.currentTarget.dataset; |
|
||||
this.$emit('click', position); |
|
||||
if (!this.offset) { |
|
||||
return; |
|
||||
} |
|
||||
if (this.data.asyncClose) { |
|
||||
this.$emit('close', { |
|
||||
position, |
|
||||
instance: this, |
|
||||
name: this.data.name, |
|
||||
}); |
|
||||
} else { |
|
||||
this.swipeMove(0); |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
}); |
|
||||
@ -1,3 +0,0 @@ |
|||||
{ |
|
||||
"component": true |
|
||||
} |
|
||||
@ -1,13 +0,0 @@ |
|||||
<view class="van-swipe-cell custom-class" data-key="cell" catchtap="onClick" bindtouchstart="startDrag" |
|
||||
catchtouchmove="{{ catchMove ? 'noop' : '' }}" capture-bind:touchmove="onDrag" bindtouchend="endDrag" |
|
||||
bindtouchcancel="endDrag"> |
|
||||
<view style="{{ wrapperStyle }}"> |
|
||||
<view wx:if="{{ leftWidth }}" class="van-swipe-cell__left" data-key="left" catch:tap="onClick"> |
|
||||
<slot name="left" /> |
|
||||
</view> |
|
||||
<slot /> |
|
||||
<view wx:if="{{ rightWidth }}" class="van-swipe-cell__right" data-key="right" catch:tap="onClick"> |
|
||||
<slot name="right" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
@ -1 +0,0 @@ |
|||||
@import '../common/index.wxss';.van-swipe-cell{position:relative;overflow:hidden}.van-swipe-cell__left,.van-swipe-cell__right{position:absolute;top:0;height:100%}.van-swipe-cell__left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} |
|
||||
Write
Preview
Loading…
Cancel
Save