使用uniapp实现全局悬浮按钮(可拖动)

效果如下

实现方案

使用uniapp官方组件 movable-area和movable-view

代码解析

在components新建一个xxx.vue组件
重点在于movable-area与movable-view需要分别增加pointer-events: none和pointer-events: auto用于组件事件穿透与恢复组件事件（此处不加会导致引用该组件的父组件无法使用事件）
组件代码如下：

<template><view><movable-area class="movable-area"><movable-view class="movable-view" :x="x" :y="y" direction="all"><image src="../static/goHome.png"></image></movable-view></movable-area></view>
</template><script>export default {data() {return {x: 320,      //x坐标y: 520,        //y坐标}}}
</script><style lang="scss">$all_width: 96rpx;$all_height:96rpx;.movable-area {height: 100vh;width: 750rpx;top: 0;position: fixed;pointer-events: none;      //此处要加，鼠标事件可以渗透.movable-view {width: $all_width;height: $all_height;pointer-events: auto;    //恢复鼠标事件image {width: $all_width;height: $all_height;}}}
</style>

组件生成后可mian.js全局挂载，后续不需要每个页面都进行引入

import App from './App'
import Vue from 'vue'
import myHome from '@/components/my_home.vue'        //引入组件Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})Vue.component('my-home',myHome)                     //进行全局挂载app.$mount()

全局挂载后可在需要使用的页面使用

<template><view class="content"><!--组件引用--><my-home></my-home></view>
</template>

使用uniapp实现全局悬浮按钮(可拖动)相关推荐

Flutter全局悬浮按钮
方法一 Offset _offset = Offset.zero;Scaffold(body: Stack(children: [_pageList[_currentIndex],Positioned ...
uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
iOS全局悬浮按钮+浮框
效果图库代码 Github地址应用悬浮按钮可以用于展示特定的信息按钮有点击拖动等事件回调,可以自行扩展功能示例中,浮框利用响应链框选View 可以拖动回调坐标,获取手势处View,进一步展示 ...
iOS中全局悬浮按钮，类似IPhone中的AssistiveTouch
前提:当时看到别人写过这个类似AssistiveTouch的demo,但是有问题,第一改变不了位置.第二切换页面后无法使用.第三运行时偶尔会崩溃.然后自己就去度娘.论坛中都查了一些资料,然后结合起来写 ...
ios添加全局悬浮按钮_iOS开发悬浮按钮
释放双眼,带上耳机,听听看~! #import "ViewController.h"@interface ViewController ()@property (weak, non ...
Android 全局悬浮按钮，悬浮按钮点击事件
实现效果: 实现方法: 在自定义baseActivity里面添加viwe即可.在子activity里刷新悬浮View即可 public abstract class BaseActivity exte ...
iOS 页面悬浮按钮可拖动、自动吸附屏幕边缘（OC）
上效果图 1.主要思路:首页建立一个悬浮Button给他加上移动手势(UIPanGestureRecognizer) 然后改变center传递给弹出页面: 2.代码 .1初始化button self. ...
h5可拖动悬浮按钮_手机端H5悬浮按钮怎么实现的呢？
最近公司项目需要在H5页面上悬浮一个按钮,同时要求按钮是可以拖动的并且需要可以自动贴边,无奈前端小伙伴不怎么给力,无奈只能我顶上了.我觉得这种情况应该可以抽出一个组件,这次就仔细探讨一下悬浮按钮的实现 ...
flutter 拖拽布局_使用Flutter模仿SOUL可任意拖动的悬浮按钮
在Flutter中,我们可以两种方式实现小部件对拖动效果 GestureDetector() Draggable() GestureDetector 在开发过程中经常使用到GestureDetecto ...
Android可拖动悬浮按钮
最近项目需要使用可拖拽的悬浮按钮,所以实现了一个小demo 因为是模拟器的缘故,拖动的时候看起来有点卡顿,如果在真机上运行时非常完美的技术要突破的难点有下面几个: 1 如何悬浮? 使用相对布局或者帧 ...

使用uniapp实现全局悬浮按钮(可拖动)

效果如下

实现方案

代码解析

使用uniapp实现全局悬浮按钮(可拖动)相关推荐

最新文章

热门文章