uni-app BindingX 绑定手势后每次触摸元素都会闪烁到初始位置后再跟随手势移动

uni-app BindingX 绑定手势后每次触摸元素都会闪烁到初始位置后再跟随手势移动

开发环境 版本号 项目创建方式
Windows window 10 专业版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：xr

页面类型：nvue

打包方式：云端

示例代码：

<template>  
    <view>  
        <div @horizontalpan="touchstart()" ref="my" style="width: 750rpx;background-color: #09BB07;height: 200px;">  
            <text ref="test" style="background-color: white;">Test</text>  
        </div>  
    </view>  
</template>  

<script>  
    const BindingX = uni.requireNativePlugin('bindingx');  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            touchstart() {  
                var my = this.$refs.my.ref;  
                var gesTokenObj = BindingX.bind({  
                    anchor: my,  
                    eventType: 'pan',  
                    props: [{  
                        element: my,  
                        property: 'transform.translateX',  
                        expression: 'x+0'  
                    }]  
                }, function(e) {  
                    // nope  
                });  
            }  
        }  
    }  
</script>  

<style>  

</style>
`

更多关于uni-app BindingX 绑定手势后每次触摸元素都会闪烁到初始位置后再跟随手势移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app BindingX 绑定手势后每次触摸元素都会闪烁到初始位置后再跟随手势移动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在BindingX手势绑定中，每次触发@horizontalpan都会重新执行bind方法，导致元素位置重置后重新绑定。这是正常现象，因为每次手势开始都会创建新的绑定关系。

建议将绑定操作移至created或mounted生命周期，避免在事件回调中重复绑定：

export default {
  mounted() {
    const my = this.$refs.my.ref;
    this.gesTokenObj = BindingX.bind({
      anchor: my,
      eventType: 'pan',
      props: [{
        element: my,
        property: 'transform.translateX',
        expression: 'x+0'
      }]
    }, function(e) {
      if(e.state === 'end') {
        // 手势结束处理
      }
    });
  },
  beforeDestroy() {
    // 清理绑定
    if(this.gesTokenObj) {
      BindingX.unbind(this.gesTokenObj);
    }
  }
}
回到顶部