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>