<template>
<div class="page" ref='outtouch'>
<div class="inner_page" ref='touch' @touchmove='touchmove'>123</div>
</div>
</template>
<script>
const BindingX = uni.requireNativePlugin('bindingx')
export default {
data(){
return {
touref:'',
deltaX:0,
deltaY:0
}
},
mounted(){
this.touref=this.getEl(this.$refs.touch)
},
methods:{
getEl: function(el) {
if (typeof el === 'string' || typeof el === 'number') return el;
if (WXEnvironment) {
return el.ref;
} else {
return el instanceof HTMLElement ? el : el.$el;
}
},
touchmove(event){
let gesTokenObj = BindingX.bind({
anchor:this.touref,
eventType:'pan',
props: [
{element:this.touref, property:'transform.translateX',expression: `x+${this.deltaX}`},
{element:this.touref, property:'transform.translateY',expression: `y+${this.deltaY}`},
]
}, (e)=>{
if(e.state === 'end'){
this.deltaX=e.deltaX+this.deltaX
this.deltaY=e.deltaY+this.deltaY
}
})
}
}
}
</script>
<style scoped>
.page {
width: 750rpx;
height: 800rpx;
position: relative;
}
.inner_page {
position: absolute;
width: 400rpx;
height: 300rpx;
background-color: #007AFF;
}
</style>
