uniapp H5悬浮按钮

组件

<template>
	<view>
		<!-- 悬浮按钮 多个菜单 -->
		<movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all" @touchmove.stop>
				<uni-fab  class="fab" ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal"
					:vertical="vertical"  :direction="direction" @trigger="trigger" :popMenu="popMenu" @fabClick="fabClick"/>
			</movable-view>
		</movable-area>
	</view>
</template>
 
<script>
	export default {
		//popMenu 是否展示二级菜单
		props:['horizontal','vertical','direction','pattern','content','popMenu'],
		data() {
			return {
				x:320,		//x坐标
				y: 750,		//y坐标
			}
		},
		mounted() {
			//根据屏幕高度设置y坐标
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					// 计算组件的高度
					that.y = res.windowHeight -10
				}
			})
		},
		methods: {
			//点击  展开菜单
			trigger(e){
				this.$emit('clickSet',e) //回调父组件方法
			},
			//点击按钮
			fabClick(e){
				this.$emit('fabClick',e) //回调父组件方法
			},
			closePress() {
				if (this.$refs.fab.isShow) {
					this.$refs.fab.close()
					return true
				}
				return false
			}
		}
	}
</script>
 
<style lang="scss">
	.movable-area {
		height: 92vh;
		width: 750rpx;
		top: 0;
		left:0;
		position: fixed;
		pointer-events: none;		//此处要加，鼠标事件可以渗透
		z-index: 99;
		.movable-view {
			width: 96rpx;
			height: 96rpx;
			pointer-events: auto;	//恢复鼠标事件
			
		}
	}
	::v-deep .uni-fab__content--other-platform {
	    box-shadow: 0 1px 5px 2px rgba(241, 233, 233, 0.1);
	}
	//原组件postion为fixed  安卓可以 苹果不行  所以改为absolute
	::v-deep .uni-fab__circle{position: absolute;z-index: 999;}
	
</style>

页面引用

<template>
	<view class="uni-padding-wrap uni-common-mt ">
		<float-button @fabClick="fabClick" horizontal='right' vertical='bottom' :pattern="pattern"
			:popMenu="true"></float-button>
	</view>
</template>
<script>
import floatButton from "@/components/floatingButton/indexMenu.vue";
export default {
data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#12c1dd',
					buttonColor: '#005FD6',
					iconColor: '#fff',
					text: '新增',
				}
		}
	},
components: {
			floatButton
		},
}
</script>