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-area>
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:
<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-area>
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
的范围。