movable-view是一个可移动的View,需要需要做为movable-area的直接子组件时候才能使用。官方文档提示说movable-area和movable-view需要设置width和height,不设置的话默认为10px。代码如下:
解决问题关键:.movableView要设置width,height值
<movable-area class="movableArea">
<movable-view class="movableView" direction="all" :damping="100" out-of-bounds="false">
<view class="fixed_icon">
<text class="up_text">提交</text>
</view>
</movable-view>
</movable-area>
.movableArea{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
pointer-events: none;
}
.movableView {
width: 190rpx;
height: 106rpx;
pointer-events: auto;//可以点击
}
.fixed_icon {
width: 190rpx;
justify-content: center;
height: 66rpx;
border-radius: 33rpx;
font-size: 28rpx;
color: #fff;
background: rgba(27, 27, 27, 0.8);
position: fixed;
right: 0;
bottom: 30%;
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.5);
}