235 lines
5.7 KiB
JavaScript
235 lines
5.7 KiB
JavaScript
var _my$getSystemInfoSync = my.getSystemInfoSync(),
|
|
windowWidth = _my$getSystemInfoSync.windowWidth;
|
|
|
|
var isV2 = my.canIUse('movable-view.onTouchStart');
|
|
Component({
|
|
data: {
|
|
leftPos: 0,
|
|
swiping: false,
|
|
holdSwipe: true,
|
|
viewWidth: windowWidth,
|
|
x: 0,
|
|
actionWidth: 0,
|
|
transitionVal: 'none'
|
|
},
|
|
props: {
|
|
className: '',
|
|
right: [],
|
|
restore: false,
|
|
index: null,
|
|
height: 52,
|
|
enableNew: false
|
|
},
|
|
didMount: function didMount() {
|
|
var _this = this;
|
|
|
|
var enableNew = this.props.enableNew;
|
|
var useV2 = isV2 && enableNew;
|
|
this.btnWidth = 0;
|
|
this.setData({
|
|
useV2: useV2
|
|
});
|
|
this.setBtnWidth();
|
|
|
|
if (useV2) {
|
|
setTimeout(function () {
|
|
_this.setData({
|
|
transitionVal: 'transform 100ms'
|
|
});
|
|
}, 500);
|
|
}
|
|
},
|
|
didUpdate: function didUpdate(_prevProps, prevData) {
|
|
var restore = this.props.restore;
|
|
var _this$data = this.data,
|
|
holdSwipe = _this$data.holdSwipe,
|
|
useV2 = _this$data.useV2;
|
|
|
|
if (restore === true && _prevProps.restore !== restore || prevData.holdSwipe === true && holdSwipe === false) {
|
|
this.setData({
|
|
leftPos: 0,
|
|
swiping: false,
|
|
x: this.btnWidth // V2
|
|
|
|
});
|
|
}
|
|
|
|
if (!useV2) {
|
|
this.setBtnWidth();
|
|
}
|
|
},
|
|
methods: {
|
|
setBtnWidth: function setBtnWidth() {
|
|
var _this2 = this;
|
|
|
|
my.createSelectorQuery().select(".am-swipe-right-" + this.$id).boundingClientRect().exec(function (ret) {
|
|
_this2.btnWidth = ret && ret[0] && ret[0].width || 0;
|
|
|
|
if (isV2 && _this2.props.enableNew) {
|
|
_this2.setData({
|
|
actionWidth: _this2.btnWidth,
|
|
x: _this2.btnWidth
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onSwipeTap: function onSwipeTap() {
|
|
if (!this.data.swiping && this.data.x < 0) {
|
|
this.setData({
|
|
leftPos: 0,
|
|
swiping: false,
|
|
x: 0
|
|
});
|
|
}
|
|
},
|
|
onSwipeStart: function onSwipeStart(e) {
|
|
this.touchObject = {
|
|
startX: e.touches[0].pageX,
|
|
startY: e.touches[0].pageY
|
|
};
|
|
var _this$props = this.props,
|
|
index = _this$props.index,
|
|
onSwipeStart = _this$props.onSwipeStart;
|
|
|
|
if (onSwipeStart) {
|
|
onSwipeStart({
|
|
index: index
|
|
});
|
|
}
|
|
},
|
|
onSwipeMove: function onSwipeMove(e) {
|
|
var touchObject = this.touchObject;
|
|
var touchePoint = e.touches[0];
|
|
var leftPos = this.data.leftPos;
|
|
touchObject.endX = touchePoint.pageX; // 首次触发时,计算滑动角度
|
|
|
|
if (touchObject.direction === undefined) {
|
|
var direction = 0;
|
|
var xDist = touchObject.startX - touchePoint.pageX || 0;
|
|
var yDist = touchObject.startY - touchePoint.pageY || 0;
|
|
var r = Math.atan2(yDist, xDist);
|
|
var swipeAngle = Math.round(r * 180 / Math.PI);
|
|
|
|
if (swipeAngle < 0) {
|
|
swipeAngle = 360 - Math.abs(swipeAngle);
|
|
}
|
|
|
|
if (swipeAngle <= 45 && swipeAngle >= 0) {
|
|
direction = 1;
|
|
}
|
|
|
|
if (swipeAngle <= 360 && swipeAngle >= 315) {
|
|
direction = 1;
|
|
}
|
|
|
|
if (swipeAngle >= 135 && swipeAngle <= 225) {
|
|
direction = -1;
|
|
}
|
|
|
|
touchObject.direction = direction;
|
|
} // 通过角度判断是左右方向
|
|
|
|
|
|
if (touchObject.direction !== 0) {
|
|
var newLeftPos = leftPos; // 滑动距离
|
|
|
|
var distance = touchObject.endX - touchObject.startX; // 左划
|
|
|
|
if (distance < 0) {
|
|
newLeftPos = Math.max(distance, -this.btnWidth); // 右划
|
|
} else {
|
|
newLeftPos = 0;
|
|
}
|
|
|
|
if (Math.abs(distance) > 10) {
|
|
this.setData({
|
|
leftPos: newLeftPos,
|
|
swiping: distance < 0
|
|
});
|
|
}
|
|
}
|
|
},
|
|
onSwipeEnd: function onSwipeEnd(e) {
|
|
var touchObject = this.touchObject;
|
|
|
|
if (touchObject.direction !== 0) {
|
|
var touchePoint = e.changedTouches[0];
|
|
touchObject.endX = touchePoint.pageX;
|
|
var leftPos = this.data.leftPos;
|
|
var distance = touchObject.endX - touchObject.startX;
|
|
var newLeftPos = leftPos;
|
|
|
|
if (distance < 0) {
|
|
if (Math.abs(distance + leftPos) > this.btnWidth * 0.7) {
|
|
newLeftPos = -this.btnWidth;
|
|
} else {
|
|
newLeftPos = 0;
|
|
}
|
|
}
|
|
|
|
this.setData({
|
|
leftPos: newLeftPos,
|
|
swiping: false
|
|
});
|
|
}
|
|
},
|
|
onChange: function onChange() {
|
|
if (!this.data.swiping) {
|
|
this.setData({
|
|
swiping: true
|
|
});
|
|
}
|
|
},
|
|
onChangeEnd: function onChangeEnd(e) {
|
|
var _this3 = this;
|
|
|
|
var actionWidth = this.data.actionWidth;
|
|
var x = e.detail.x;
|
|
this.setData({
|
|
x: x < actionWidth / 2 ? -1 : actionWidth - 1,
|
|
swiping: false
|
|
}, function () {
|
|
_this3.setData({
|
|
x: _this3.data.x === -1 ? 0 : actionWidth
|
|
});
|
|
});
|
|
},
|
|
done: function done() {
|
|
var _this4 = this;
|
|
|
|
this.setData({
|
|
holdSwipe: true
|
|
}, function () {
|
|
_this4.setData({
|
|
holdSwipe: false
|
|
});
|
|
});
|
|
},
|
|
onItemClick: function onItemClick(e) {
|
|
var _this5 = this;
|
|
|
|
var onRightItemClick = this.props.onRightItemClick;
|
|
var holdSwipe = this.data.holdSwipe;
|
|
|
|
if (onRightItemClick) {
|
|
var index = e.target.dataset.index;
|
|
onRightItemClick({
|
|
index: index,
|
|
extra: this.props.extra,
|
|
detail: this.props.right[index],
|
|
done: this.done.bind(this)
|
|
});
|
|
}
|
|
|
|
if (!this.data.swiping && holdSwipe === false) {
|
|
setTimeout(function () {
|
|
_this5.setData({
|
|
leftPos: 0,
|
|
swiping: false,
|
|
x: 0
|
|
});
|
|
}, 300);
|
|
}
|
|
}
|
|
}
|
|
}); |