项目需求:
因为悬浮客服有时候会遮挡住界面内容,故需要对悬浮的气泡弹窗做可拖动操作
**movable-area:**可拖动区域
**movable-view:**可移动的视图容器,在页面中可以拖拽滑动或双指缩放。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
direction | String | none | movable-view的移动方向,属性值有all、vertical、horizontal、none | |
inertia | Boolean | false | movable-view是否带有惯性 | |
out-of-bounds | Boolean | false | 超过可移动区域后,movable-view是否还可以移动 | |
x | Number / String | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 | ||
y | Number / String | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 | ||
damping | Number | 20 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 | 360小程序不支持 |
friction | Number | 2 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 | 360小程序不支持 |
disabled | Boolean | false | 是否禁用 | |
scale | Boolean | false | 是否支持双指缩放,默认缩放手势生效区域是在movable-view内 | 360小程序不支持 |
scale-min | Number | 0.5 | 定义缩放倍数最小值 | |
scale-max | Number | 10 | 定义缩放倍数最大值 | |
scale-value | Number | 1 | 定义缩放倍数,取值范围为 0.5 - 10 | |
animation | Boolean | true | 是否使用动画 | |
@change | EventHandle | 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData) | ||
@scale | EventHandle | 缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale}, |
<movable-area>
<movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease">
<view class="kefu_fixed">
<image src="/static/center/kefu.png" mode="widthFix" class="kefu_icon"></image>
<view class="u-text-center color-6 u-font-26" @click="showPopup=true">
<view>联系</view>
<view>客服</view>
</view>
</view>
</movable-view>
</movable-area>
movable-area {
position: fixed;
height: 60vh;
width: 100rpx;
top:400rpx;
overflow: hidden;
right:20rpx;
z-index:101
}
movable-view {
width: 100rpx;
height:500rpx;
}
.kefu_fixed{
width: 100rpx;
background: #f9f9f9;
padding:15rpx 5rpx;
border-radius: 80rpx;
z-index:100;
margin-top:100rpx
}
.kefu_icon{
margin:0 auto;
display: block;
width: 80rpx;
}
最终效果:可在指定范围内进行上下拖动