每天一篇好文章网站,云服务器建网站,全国企业名单大全,贵州省建设厅网站官网项目需求#xff1a; 因为悬浮客服有时候会遮挡住界面内容#xff0c;故需要对悬浮的气泡弹窗做可拖动操作 movable-area#xff1a;可拖动区域 movable-view#xff1a;可移动的视图容器#xff0c;在页面中可以拖拽滑动或双指缩放。
属性说明
属性名类型默认值说…项目需求 因为悬浮客服有时候会遮挡住界面内容故需要对悬浮的气泡弹窗做可拖动操作 movable-area可拖动区域 movable-view可移动的视图容器在页面中可以拖拽滑动或双指缩放。
属性说明
属性名类型默认值说明平台差异说明directionStringnonemovable-view的移动方向属性值有all、vertical、horizontal、noneinertiaBooleanfalsemovable-view是否带有惯性out-of-boundsBooleanfalse超过可移动区域后movable-view是否还可以移动xNumber / String定义x轴方向的偏移如果x的值不在可移动范围内会自动移动到可移动范围改变x的值会触发动画yNumber / String定义y轴方向的偏移如果y的值不在可移动范围内会自动移动到可移动范围改变y的值会触发动画dampingNumber20阻尼系数用于控制x或y改变时的动画和过界回弹的动画值越大移动越快360小程序不支持frictionNumber2摩擦系数用于控制惯性滑动的动画值越大摩擦力越大滑动越快停止必须大于0否则会被设置成默认值360小程序不支持disabledBooleanfalse是否禁用scaleBooleanfalse是否支持双指缩放默认缩放手势生效区域是在movable-view内360小程序不支持scale-minNumber0.5定义缩放倍数最小值scale-maxNumber10定义缩放倍数最大值scale-valueNumber1定义缩放倍数取值范围为 0.5 - 10animationBooleantrue是否使用动画changeEventHandle拖动过程中触发的事件event.detail {x: x, y: y, source: source}其中source表示产生移动的原因值可为touch拖动、touch-out-of-bounds超出移动范围、out-of-bounds超出移动范围后的回弹、friction惯性和空字符串setDatascaleEventHandle缩放过程中触发的事件event.detail {x: x, y: y, scale: scale}
movable-areamovable-view directionall damping50 friction0.5 scale1.5 animationeaseview classkefu_fixedimage src/static/center/kefu.png modewidthFix classkefu_icon/imageview classu-text-center color-6 u-font-26 clickshowPopuptrueview联系/viewview客服/view/view/view/movable-view
/movable-areamovable-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;
}最终效果可在指定范围内进行上下拖动
