uni-app 客服按钮可上下拖动动-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app 客服按钮可上下拖动动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目需求：

因为悬浮客服有时候会遮挡住界面内容，故需要对悬浮的气泡弹窗做可拖动操作

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;
}

最终效果：可在指定范围内进行上下拖动

uni-app 客服按钮可上下拖动动,uni-app,前端文章来源地址https://www.toymoban.com/news/detail-689369.html