uniapp小程序中设置movable-view 位置

可以通过设置movable-view组件的x和y属性来改变其位置。例如，如果想将movable-view组件移动到屏幕左上角，可以设置x和y属性为0：

<view>
  <movable-view x="0" y="0">这里是movable-view的内容</movable-view>
</view>

如果想将movable-view组件移动到屏幕中心，可以先获取屏幕宽度和高度，然后根据组件大小计算出应该设置的x和y值：

<view>
  <movable-view :x="(screenWidth - movableWidth) / 2" :y="(screenHeight - movableHeight) / 2">这里是movable-view的内容</movable-view>
</view>

其中，movableWidth和movableHeight分别表示movable-view组件的宽度和高度，可以通过CSS样式或动态计算得到；screenWidth和screenHeight分别表示屏幕的宽度和高度，可以通过uni.getSystemInfoSync()方法获取。

相关问题

在小程序JS中 怎么监控movable-view，当movable-view到达指定位置时触发事件：移动到指定位置

可以通过监听movable-view的bindchange事件，实时获取movable-view的位置信息，判断是否到达指定位置。

以下是一个示例代码：

1. 在wxml中添加movable-view组件，并绑定bindchange事件：

<view class="wrapper">
  <movable-view 
    x="{{x}}" 
    y="{{y}}" 
    direction="all" 
    bindchange="onChange">
    {{content}}
  </movable-view>
</view>

2. 在js文件中定义onChange事件处理函数，判断movable-view是否到达指定位置：

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的实时位置信息，判断是否到达指定位置，如果到达则触发相应的事件处理函数。

小程序movable-area如何设置回弹到原点

可以通过监听movable-view的touchend事件来判断movable-view是否超出了movable-area的范围，如果超出了就设置movable-view的位置回到原点。

示例代码：

1.在movable-area中添加一个movable-view：

<view class="container">
  <movable-area class="area">
    <movable-view class="view" direction="all">
      movable-view
    </movable-view>
  </movable-area>
</view>

2.在Page的onLoad方法中获取movable-view的初始位置：

onLoad: function () {
  wx.createSelectorQuery().select('.view').boundingClientRect(res => {
    this.setData({
      startX: res.left,
      startY: res.top
    })
  }).exec()
},

3.在movable-view的touchend事件中判断是否超出了movable-area的范围，如果超出了就设置movable-view的位置回到原点：

onTouchEnd: function (e) {
  wx.createSelectorQuery().select('.area').boundingClientRect(res => {
    // 判断movable-view是否超出了movable-area的范围
    if (e.changedTouches[0].clientX < res.left || e.changedTouches[0].clientX > res.right || e.changedTouches[0].clientY < res.top || e.changedTouches[0].clientY > res.bottom) {
      // 超出了范围，设置movable-view的位置回到原点
      this.setData({
        x: this.data.startX,
        y: this.data.startY
      })
    }
  }).exec()
}