uni-app实现悬浮窗口

完整代码如下:

html:

<template>
	<view class="wx-page">
		<view class="float-box"></view>
	</view>
</template>

css:

<style lang="scss" scoped>
	.wx-page {
		width: 750rpx;
		height: 6000rpx;
	}

	.float-box {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		right: 30rpx;
		bottom: 150rpx;
		border-radius: 50%;
		background-color: #ff6000;
	}
</style>

js:

<script>
	export default {
		data() {
			return {
				isScroll: false,
				timer: "",
				animationData: "",
				animation: ""
			}
		},
		onLoad() {
			this.animation = uni.createAnimation()
		},
		onPageScroll() {
			if (!this.isScroll) {
				this.isScroll = true;
				this.animation.translateX(37).opacity(1).step({
					duration: 200
				}).opacity(0.28).step();
				this.animationData