uniapp （时长累计）全局悬浮窗实现

悠@散人

已于 2022-05-28 11:30:27 修改

阅读量4.4k

点赞数 1

文章标签： javascript 前端 vue.js

于 2022-05-28 11:25:03 首次发布

本文链接：https://blog.csdn.net/m0_37593950/article/details/125014887

版权

本文介绍了如何在uniapp的H5项目中创建一个全局可拖动悬浮窗，用于记录用户在线时长，并在30秒无操作时停止计时。文中详细阐述了实现方案，包括悬浮窗的拖拽功能和30秒计时器的逻辑，并提供了具体的JavaScript代码示例。此外，还给出了在不同页面中应用此功能的步骤。

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

关键字

uniapp 全局可拖拽悬浮窗 30S无操作停止计时

需求

使用uniapp的一个H5项目中有一个全局的悬浮窗，记录用户的在线时长，如果30S用户没有任何操作就停止计时，在播放视频和播放音频时无30S限制。

方案

第一部分:实现全局可拖动的悬浮窗
在uniapp中不能再App.vue 中写任何的模板代码，所以说只能在每个page中添加，实现拖拽的时候先记录一下上次拖拽的位置，把位置作为一个全局的变量，在下一个页面进入后将位置的全局变量赋值，组件代码如下：

<template>
	<view class="fab_parent">
		<movable-area style="width: 100%; height: 100%;">//整个页面都可以拖动
			<movable-view :x="this.vue_onlinePosition.x" :y=" this.vue_onlinePosition.y" direction="all"
				@change="onChange">
				<view class="fab" @touchstart="touchstart" @touchend="touchend"//悬浮窗View
					style="width: 184rpx;height: 92rpx; background: url(”背景图片“); pointer-events:auto; background-repeat:no-  repeat ">
					{
   {
   this.vux_online_timeStr}}
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
   
		name: "online-fab",
		data() {
   
			return {
   
				time: 0,
				x: 0,
				y: 0
			};
		},
		methods: {
   
			onChange: function(e) {
   //拖拽过程中记录坐标位置
				this.x = e.detail.x
				this.y = e.detail.y
			},
			touchstart: function(e) {
   
				this.$emit('fabState', "start")
			},
			touchend: function(e) {
   //拖拽结束后将位置赋值
				let position = {
   
					x: this.x,
					y: this.y
				}
				this.$u.vuex('vue_onlinePosition', position)