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

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

浏览量:686 时间: 来源:Mr_Tony

movable-view是一个可移动的View,需要需要做为movable-area的直接子组件时候才能使用。官方文档提示说movable-areamovable-view需要设置widthheight,不设置的话默认为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的范围。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎