小程序/H5懸浮窗組件

基本介紹

當(dāng)我們開發(fā)小程序或這app端的時(shí)候，有時(shí)候會(huì)遇到懸浮窗的需求。如果用原生Js寫會(huì)異常的復(fù)雜，所以使用那些大佬們已經(jīng)開發(fā)好的組件會(huì)使開發(fā)變得異常的簡(jiǎn)潔。

我剛來(lái)亞信實(shí)習(xí)的時(shí)候，接手了項(xiàng)目 - - - 生產(chǎn)端H5的開發(fā)。在3.2版本的時(shí)候，原型圖里畫了呼叫懸浮框，然后就開始找插件。在插件市場(chǎng)里面找到了一個(gè)很不錯(cuò)的插件，根據(jù)上面的介紹，直接在項(xiàng)目里使用，效果看起來(lái)很不錯(cuò)，但開發(fā)邏輯的時(shí)候，發(fā)現(xiàn)需要一個(gè)點(diǎn)擊事件，而我找的插件的源碼是沒(méi)有定義點(diǎn)擊事件的。由于我剛接觸實(shí)習(xí)，對(duì)于一些知識(shí)還沒(méi)有完全掌握，所以就在網(wǎng)上找其他的示例。找到之后，在剛才那個(gè)插件里面修改，最后成功搞定懸浮窗的點(diǎn)擊以及拖動(dòng)邊界問(wèn)題。所以我寫下了這篇博客，一來(lái)是為了讓自己記憶的更清楚；二來(lái)，是為了讓前端初學(xué)者在遇到這樣的問(wèn)題時(shí)能夠少走彎路。

廢話不再多說(shuō)，直接開始！！！

1. 下載組件

在可拖拽懸浮球里點(diǎn)擊下載插件ZIP，下載完成后，解壓到 uni-app 根目錄

2. 導(dǎo)入組件

這是我的當(dāng)時(shí)的導(dǎo)入方法

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. 組件參數(shù)

屬性名類型說(shuō)明

x	Number	小球初始X軸
y	Number	小球初始Y軸
image	String	球的圖片路徑
@tap	String	懸浮框點(diǎn)擊事件

5. 使用組件

<dragball :x=300 :y=300 image="圖片路徑"></dragball>

此時(shí)就可以在頁(yè)面上顯示懸浮窗的效果了，讓你們看看我的效果：

6. 出現(xiàn)問(wèn)題

但此時(shí)的懸浮窗雖然已經(jīng)顯示出來(lái)，但是卻沒(méi)有點(diǎn)擊事件以及拖拽的時(shí)候會(huì)拖出邊界，下面是我的解決辦法

7. 在該插件源碼上面定義點(diǎn)擊事件

進(jìn)入到該插件的源碼組件，定義如下：

<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="image" mode="aspectFill" @tap="handleBall" ></image></view></template>

使用該組件時(shí)調(diào)用

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

在下面的methods中定義該方法。

由于代碼是在公司的云桌面里開發(fā)的，不能粘貼賦值到自己的電腦上，所以接下來(lái)的代碼我用截圖的形式來(lái)展示，自己手敲太浪費(fèi)時(shí)間

點(diǎn)擊事件的原理主要就是 組件之間的傳值，如果這點(diǎn)不懂的童鞋可以去看下Vue官方文檔，介紹還是挺詳細(xì)的。

關(guān)于拖拽邊界的問(wèn)題，在里面也解決了，這里我就不說(shuō)了，有興趣的童鞋可以看下這部分代碼，也是很簡(jiǎn)單的！

以上就是我解決這個(gè)問(wèn)題的方法，主要適用于剛接觸項(xiàng)目的前端小白和基礎(chǔ)不牢固的童鞋，我也是剛剛接觸到企業(yè)級(jí)項(xiàng)目的小白，希望大家與我共勉！！！

總結(jié)

以上是生活随笔為你收集整理的uniapp使用悬浮窗组件添加点击事件的处理方法以及拖拽出界的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。