movable-view是一个可移动的View,需要需要做为movable-area的直接子组件时候才能使用。官方文档提示说movable-area和movable-view需要设置width和height,不设置的话默认为10px。但是在业务中,我们想要移动的组件不可能仅仅是movable-view,比如一个image。这是我们仅仅需要将image放在movable-view即可。代码如下:
wxml: movable-area class="move_root"movable-view class="move_view" direction="all" image class="float_btn" src="../../images/lzjk_float_button.gif" bindtap="floatBtnOnclick"/image /movable-view/movable-areawxss:.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: movable-area class="move_root" movable-view class="float_btn move_view" direction="all"!-- 需要设置宽高,即使子view有宽高 -- image class="float_btn" src="../../images/lzjk_float_button.gif" bindtap="floatBtnOnclick"/image /movable-view/movable-areawxss:.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的范围。













