E企盈营销工具技术服务商 热线:4006-838-530

微信小程序movableview移动超出movablearea范围的问题

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序movableview移动超出movablearea范围的问题
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏