4 changed files with 0 additions and 149 deletions
Split 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