安卓上没问题,ios就有问题
效果的录屏http://101.35.155.192:8080/video/33711b1694ffd49a5f74328939f7872b.mp4
http://101.35.155.192:8080/video/33711b1694ffd49a5f74328939f7872b.mp4
<template>
<view
class="cover-face-image"
ref="moveImage"
@touchstart="handleTouchStart",
:style="{
height: imgHeight + 'px',
width: imgWidth + 'px',
opacity:opacity/10,
top:scaleObj.top
}"
>
<image
@load="imgLoad"
:src="imgSrc"
:style="{
height: imgHeight + 'px',
width: imgWidth + 'px'
}"
>
</image>
</view>
</template>
<script>
const BindingX = uni.requireNativePlugin('bindingx');
export default {
data() {
return {
scaleObj:{
top:0,
x: 0,
y: 0,
zoom:1,
rotateY:0
},
zoom:10,
}
},
methods: {
getEl(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) {
return el.ref;
} else {
return el instanceof HTMLElement ? el : el.$el;
}
},
handleTouchStart(event) {
const move = this.getEl(this.$refs.moveImage);
const $this = this;
const oBindingX = BindingX.bind({
anchor: move,
eventType: 'pan',
props:[{
element: move,
property: 'transform.translateX',
expression: `x+${this.scaleObj.x}`
},{
element: move,
property: 'transform.translateY',
expression: `y+${this.scaleObj.y}`
}]
},function(e){
if (e.state === 'end') {
if ($this.timer) {
//移动时间特别短暂 视为点击事件
clearTimeout($this.timer);
// 点击事件处理
}
BindingX.unbind({
token: oBindingX.token,
eventType: 'pan'
})
//记录位置
$this.scaleObj.y += e.deltaY;
$this.scaleObj.x += e.deltaX;
}else{
// 判断点击事件还是拖动事件
$this.timer = setTimeout(() => {
$this.timer = null;
}, 50)
}
})
}
}
}
</script>
0 个回复