在小程序JS中 怎么监控movable-view,当movable-view到达指定位置时触发事件:移动到指定位置
时间: 2024-05-02 11:23:30 浏览: 126
js实现滑动触屏事件监听的方法
可以通过监听movable-view的bindchange事件,实时获取movable-view的位置信息,判断是否到达指定位置。
以下是一个示例代码:
1. 在wxml中添加movable-view组件,并绑定bindchange事件:
```html
<view class="wrapper">
<movable-view
x="{{x}}"
y="{{y}}"
direction="all"
bindchange="onChange">
{{content}}
</movable-view>
</view>
```
2. 在js文件中定义onChange事件处理函数,判断movable-view是否到达指定位置:
```javascript
Page({
data: {
x: 0,
y: 0,
content: 'Hello World',
targetX: 100, // 指定位置x坐标
targetY: 100 // 指定位置y坐标
},
onChange: function(event) {
let { x, y } = event.detail;
if (x === this.data.targetX && y === this.data.targetY) {
console.log('movable-view到达指定位置');
// 在此处添加到达指定位置时触发的事件处理函数
}
}
})
```
在onChange事件处理函数中,获取movable-view的实时位置信息,判断是否到达指定位置,如果到达则触发相应的事件处理函数。
阅读全文