微信小程序movable-view移动超出movable-area范围的问题

movable-view是一个可移动的View，需要需要做为movable-area的直接子组件时候才能使用。官方文档提示说movable-area和movable-view需要设置width和height，不设置的话默认为10px。但是在业务中，我们想要移动的组件不可能仅仅是movable-view，比如一个image。这是我们仅仅需要将image放在movable-view即可。代码如下：

wxml：
  

    
  


wxss：
.move_root{
  width: 100vw;
  height: 100vh;
}
.move_view{//设置移动按钮默认位置
  position: absolute;
  top: 30vh;
  left: 70vw;
}
.float_btn{//图片按钮的大小
  width: 136rpx;
  height: 136rpx;
}

但是以上代码因为没有给movable-view设置宽高，所以会导致image移动出整个视图边界。解决办法就是给movable-view设置一个和image一样的宽高。代码如下：

wxml：
  
  	
   	 
  


wxss：
.move_root{
  width: 100vw;
  height: 100vh;
}
.move_view{//设置移动按钮默认位置
  position: absolute;
  top: 30vh;
  left: 70vw;
}
.float_btn{//图片按钮的大小
  width: 136rpx;
  height: 136rpx;
}

个人猜测是，movable-area只能界定movable-view的范围，默认image不会撑大movable-view的范围，同时又不会隐藏。继而可以移动出整个movable-area的范围。