uni-app 小程序实现全屏客服按钮随意拖动

今天是个开心的

于 2023-04-04 16:46:40 发布

阅读量502

点赞数 2

文章标签： uni-app 小程序 css

本文链接：https://blog.csdn.net/weixin_43771472/article/details/129956691

版权

该文章展示了一段代码，用于创建一个可移动的区域组件，其中包含一个图片和一个在线客服按钮。组件的movable-view在x和y轴上设定了初始位置，允许用户在所有方向上移动。图片使用了widthFix模式，客服按钮则被隐藏并定位在左上角。

摘要由CSDN通过智能技术生成

xy轴给与初始位置

可以自己封装成组件

<!-- x,y轴 -->
<movable-area class="movableArea">
	<movable-view class="movableView" direction="all" x="650rpx" y="800rpx">
		<image src="图片.png" mode="widthFix"></image>
		<button open-type='contact'  class="btn">在线客服</button>
        <text style="color: #fff;font-size: 15rpx;margin-top: 5rpx;">在线客服</text>
	</movable-view>
</movable-area>

<!-- css -->

.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 99;
	
		.movableView {
			pointer-events: auto;
			width: 100rpx;
			height: 100rpx;
            display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
			// 客服
		.btn {
			width: 50px;
			height: 50px;
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			border-radius: 100%;
			opacity: 0;
		}
			
	}
}