小程序/H5悬浮窗组件

基本介绍

当我们开发小程序或这app端的时候，有时候会遇到悬浮窗的需求。如果用原生Js写会异常的复杂，所以使用那些大佬们已经开发好的组件会使开发变得异常的简洁。

我刚来亚信实习的时候，接手了项目 - - - 生产端H5的开发。在3.2版本的时候，原型图里画了呼叫悬浮框，然后就开始找插件。在插件市场里面找到了一个很不错的插件，根据上面的介绍，直接在项目里使用，效果看起来很不错，但开发逻辑的时候，发现需要一个点击事件，而我找的插件的源码是没有定义点击事件的。由于我刚接触实习，对于一些知识还没有完全掌握，所以就在网上找其他的示例。找到之后，在刚才那个插件里面修改，最后成功搞定悬浮窗的点击以及拖动边界问题。所以我写下了这篇博客，一来是为了让自己记忆的更清楚；二来，是为了让前端初学者在遇到这样的问题时能够少走弯路。

废话不再多说，直接开始！！！

1. 下载组件

在可拖拽悬浮球里点击下载插件ZIP，下载完成后，解压到 uni-app 根目录

2. 导入组件

这是我的当时的导入方法

import dragBall from "../../components/drag-ball/drag-ball.vue"

3. 组件引用

 <template><view class="content"><dragball :x=300 :y=300 image="图片路径"></dragball></view></template>import dragBall from "../../components/drag-ball/drag-ball.vue"export default {components: {  // 引用组件dragball},data() {return {}},onLoad() {},methods: {}}

4. 组件参数

属性名	类型	说明
x	Number	小球初始X轴
y	Number	小球初始Y轴
image	String	球的图片路径
@tap	String	悬浮框点击事件

5. 使用组件

<dragball :x=300 :y=300 image="图片路径"></dragball>

此时就可以在页面上显示悬浮窗的效果了，让你们看看我的效果：

6. 出现问题

但此时的悬浮窗虽然已经显示出来，但是却没有点击事件以及拖拽的时候会拖出边界，下面是我的解决办法

7. 在该插件源码上面定义点击事件

进入到该插件的源码组件，定义如下：

     <template><view class="holden"><image class="ball" :style="'left:'+(moveX == 0 & x > 0 ? x:moveX)+'px;top: '+(moveY == 0 & y> 0? y:moveY )+'px'" @touchstart="drag_start" @touchmove.prevent="drag_hmove" :src="data:image" mode="aspectFill" @tap="handleBall" ></image></view></template>

使用该组件时调用

<dragball :x=300 :y=300 image="图片路径" @handleBall="事件名"></dragball>

在下面的methods中定义该方法。

由于代码是在公司的云桌面里开发的，不能粘贴赋值到自己的电脑上，所以接下来的代码我用截图的形式来展示，自己手敲太浪费时间

点击事件的原理主要就是 组件之间的传值，如果这点不懂的童鞋可以去看下Vue官方文档，介绍还是挺详细的。

关于拖拽边界的问题，在里面也解决了，这里我就不说了，有兴趣的童鞋可以看下这部分代码，也是很简单的！

以上就是我解决这个问题的方法，主要适用于刚接触项目的前端小白和基础不牢固的童鞋，我也是刚刚接触到企业级项目的小白，希望大家与我共勉！！！

uniapp使用悬浮窗组件添加点击事件的处理方法以及拖拽出界的问题相关推荐

textview点击事件 android,Android给TextView添加点击事件的实现方法
首先设定TextView的clickable属性为true. 可以在布局文件中进行设定,比如: android:id="@+id/phone" android:clickable= ...
给View 添加手势，点击无反应如何给View添加点击事件，手势方法
项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用. 项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时 ...
vue自定义组件的点击事件失效
在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用.但是使用组件时很可能又会给该组件添加点击事件.如果直接这样写,事件则会失效: 正确写法应该是这样:
谷歌地图中给infowindow添加点击事件
项目中想实现点击地图中marker上面的图标,即点击infowindow之后跳转到另一个界面,发现不可以像监听marker点击事件一样直接给infowindow添加点击事件.解决方法为将content ...
android悬浮窗组件,Android 悬浮窗，悬浮view功能实现
写在前面:本文仅个人开发时遇到的问题及个人解决办法的记录. 国内各个手机厂商对ROM魔改的比较严重,还没有做兼容性测试,所以碰到沙雕的机子的时候,请再去寻找适配方法最近项目开发中,需要实现一个悬浮窗 ...
【Visual Studio 2019】创建 MFC 桌面程序 ( 安装 MFC 开发组件 | 创建 MFC 应用 | MFC 应用窗口编辑 | 为按钮添加点击事件 | 修改按钮文字 | 打开应用 )
文章目录一.安装 MFC 开发组件二.创建 MFC 应用三.MFC 应用窗口编辑四.为按钮添加点击事件五.修改按钮文字六.打开系统其它应用七.博客源码一.安装 MFC 开发组件打开 ...
uni-app中Card slots的使用（添加点击事件）（uni-card）
uni-app官方文档中只给出了action底部插槽的使用的例子.对于初学者来说,当需要在卡片顶部添加点击事件时,往往也需要一个例子来引路. 这里是使用title(卡片头部插槽)在顶部添加点击事件,如 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
Android免权限悬浮窗组件 - FloatingX
FloatingX ,一个强大的免权限悬浮窗组件,支持全局,以及局部悬浮窗. 背景在前几个月的业务开发中,我们 app 需要对悬浮窗进行更改,常见的悬浮窗实现方式分为两种: 前者是获取权限后,利用 ...

uniapp使用悬浮窗组件添加点击事件的处理方法以及拖拽出界的问题