uni-app悬浮（拖动）按钮组件

预览效果，请搜索微信小程序‘圈内车’

• 如何制作一个类似小程序飘在微信的悬浮按钮呢，困难的地方不是悬浮，而是不能影响页面下拉刷新，上滑加载，并且要随着页面的滑动，始终保持在页面最上方。
• 在这里，我用的是uni-app组件库里面的movable-area和movable-view，可以在h5、小程序里面使用。

代码解析（源代码请移步我的资源下载）：

• 目前只是预想了一个可控制按钮显示的参数，其余参数暂时没有
• 准备好组件dom

<movable-area class="fixed-box">
	<movable-view v-if="showButton" class="fixed-button" direction="all" :inertia="true" >
		<slot></slot>
	</movable-view>
</movable-area>

• 编写css，重点在这里，就是如果让按钮一直悬浮在上面，并且移动页面内的标签还不受影响

.fixed-box {
	pointer-events: none; // 这里是重点，盒子可穿透操作
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100000;
}
.fixed-button {
	pointer-events: auto;
	width: max-content;
	height: auto;
	overflow: hidden;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 20rpx;
	top: 85vh;
}

/* 适配iphonex 有底部横条的 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	.fixed-box {
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}
}

使用案例，引入之后，就可以自定义内容了。

<fixed-box :showButton="true">
	<text style="background-color: #EE5757;color:#fff">自定义内容</text>
</fixed-box>