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

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

相关推荐
懒大王爱吃狼33 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js