You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.5 KiB
91 lines
2.5 KiB
const BindingX = uni.requireNativePlugin('bindingx');
|
|
const animation = uni.requireNativePlugin('animation');
|
|
export default {
|
|
mounted() {
|
|
this.container = this.getEl(this.$refs['container'])
|
|
},
|
|
methods: {
|
|
_notifyTouchChangeForItems(isTouchEnd) {
|
|
this.swiperViews && this.swiperViews.forEach(it => {
|
|
it.canClick = isTouchEnd
|
|
})
|
|
},
|
|
touchstart(e) {
|
|
if (this.isAnimated) return;
|
|
if (this.stop) return
|
|
this.isScrolling = true
|
|
this._notifyTouchChangeForItems(false)
|
|
this.stop = true
|
|
this.startTime = new Date().getTime()
|
|
const props = [{
|
|
element: this.container,
|
|
property: 'transform.translateX',
|
|
expression: uni.upx2px(this.left) + '+x'
|
|
}]
|
|
if (this.is3D) {
|
|
const deltaScale = `${this.scale}/${this.width}*x`
|
|
const currentScale = `${this.scale}-abs(x)/${this.width}*1`
|
|
const realScale = `min(${currentScale},${this.scale})`
|
|
const currentCardExp = `${realScale} < 1 ? 1 : ${realScale}`;
|
|
const leftCardExp = `${deltaScale} > 0 ? min(${this.scale},(1 + ${deltaScale})) : min(1,(1 + ${deltaScale}))`;
|
|
const rightCardExp = `${deltaScale} > 0 ? min(1,(1 - ${deltaScale})) : min(${this.scale},(1 - ${deltaScale}))`;
|
|
props.push({
|
|
element: this.getSwipteItemEl(this.position),
|
|
property: 'transform.scale',
|
|
expression: currentCardExp
|
|
})
|
|
if (this.position - 1 > -1) {
|
|
props.push({
|
|
element: this.getSwipteItemEl(this.position - 1),
|
|
property: 'transform.scale',
|
|
expression: leftCardExp
|
|
})
|
|
}
|
|
if (this.position + 1 > this._size) {
|
|
props.push({
|
|
element: this.getSwipteItemEl(this.position + 1),
|
|
property: 'transform.scale',
|
|
expression: rightCardExp
|
|
})
|
|
}
|
|
}
|
|
this.eventpan = BindingX.bind({
|
|
anchor: this.container,
|
|
eventType: 'pan',
|
|
props
|
|
}, (e) => {
|
|
if (e.state === 'end' ||
|
|
e.state === 'exit') {
|
|
setTimeout(() => {
|
|
this._notifyTouchChangeForItems(true)
|
|
}, 10)
|
|
const timing = new Date().getTime() - this.startTime
|
|
const velocity = Math.abs(e.deltaX / timing)
|
|
this.stop = false
|
|
this.isScrolling = false
|
|
if (this.eventpan && this.eventpan.token) {
|
|
BindingX.unbind({
|
|
token: this.eventpan.token,
|
|
eventType: 'pan'
|
|
})
|
|
}
|
|
this.moveEnd({
|
|
velocity,
|
|
deltaX: e.deltaX,
|
|
deltaY: e.deltaY
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getSwipteItemEl(idx) {
|
|
return this.swiperViews[idx].$el.ref
|
|
},
|
|
/**
|
|
* 获取ref
|
|
* @param {Object} el
|
|
*/
|
|
getEl(el) {
|
|
return el.ref
|
|
}
|
|
}
|
|
}
|