uniapp开发小程序如何实现全局悬浮按钮

已于 2024-01-20 17:36:53 修改
阅读量7.9k 收藏 34
点赞数 9
分类专栏： uniapp 文章标签： 前端
于 2022-03-21 15:43:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/123630461
版权
本文介绍如何在uniApp中实现一个全局悬浮按钮，利用uni.getSystemInfoSync()获取设备信息，通过uni.createSelectorQuery().in(this)处理节点选择，结合touchmove事件监听用户滑动，动态更新按钮位置。此外，讨论了组件的全局注册和引用方法，特别是在vue3项目中的应用。
摘要由CSDN通过智能技术生成

看效果

在这里插入图片描述
这是一个全局的按钮，可以换成图片，自己写样式，每个页面都有；

须知：

1.uni.getSystemInfoSync()获取手机的信息接口

可以拿到手机屏幕的宽高
在这里插入图片描述
在这里插入图片描述

2.uni.createSelectorQuery().in(this)

uniapp中式没有window对象，和dom元素的，但是有时我们需要获取页面上节点的一些几何信息；

const query = uni.createSelectorQuery().in(this
了解本专栏 订阅专栏 解锁全文 超级会员免费看
小莉爱编程
关注
  • 9
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
专栏目录
订阅专栏
uniapp(全端兼容) - 最新详细实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置，uniapp可拖动的悬浮球，悬浮图标支持拖动效果（详细示例源码及注释，复制粘贴快速植入）
高级前端工程师
03-27 5134
使用uniapp实现全局悬浮按钮(可拖动)，uni-app 微信小程序实现全屏悬浮按钮可拖动,自动吸附边缘，uni-app悬浮(拖动)按钮组件，关于uniapp的拖动悬浮球，uniapp 实现悬浮球拖拽，uniapp vue H5悬浮在页面之上可随手指拖动组件，uniapp实现界面可任意拖动小图标，uniapp 悬浮球拖拽加回弹效果，uniapp全局可拖动悬浮球，uniapp小程序悬浮按钮，uniapp-movable 可拖动悬浮球，uniapp--悬浮可拖动按钮-实现思路，uniapp怎么实现一个悬浮按钮
使用 UniApp 实现小程序的微信登录功能
10-15
首先，我们需要理解在使用UniApp开发微信小程序的微信登录过程中会涉及到的技术点，包括微信登录的流程、如何在UniApp中封装登录逻辑、如何在小程序中获取用户信息、以及如何将获取的用户信息安全地存储和使用。...
uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮
weixin_47211929的博客
04-27 2141
实现拖动的悬浮按钮
uniapp微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘效果demo(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-25 2314
uniapp微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘效果demo
uniapp实现可拖动悬浮按钮(最新版2024-7月)
最新发布
Aftery的博客
07-01 1153
uniapp移动端实现悬浮球效果功能
uniapp实现全局悬浮框
iOS_MingXing的博客
02-22 1951
1,在components新建组件(省去了每个页面都要引用组件的麻烦)uniapp实现全局悬浮框(按钮,页面,图片自行设置) 可拖动。3,在每个需要用到悬浮框的页面引入。每个页面切换后都会更新最新位置。
使用uniapp实现全局悬浮按钮(可拖动)
热门推荐
...
08-08 1万+
uniapp实现全局悬浮按钮(可拖动)
uniapp实现悬浮球组件
qq_48378883的博客
01-31 987
【代码】uniapp实现悬浮球组件。
基于uniapp微信小程序我的钱包页面
03-26
【基于uniapp微信小程序我的钱包页面】开发详解 在移动应用开发领域，微信小程序因其轻量化、便捷的特性，已经成为开发者的重要选择。而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、...
Android自定义APP全局悬浮按钮
08-28
Android自定义APP全局悬浮按钮是指在Android应用程序中实现一个可以悬浮在其他控件上的按钮，具有全局性和悬浮性。这种功能可以广泛应用于各种Android应用程序中，例如游戏、社交媒体、办公软件等。 一、权限申请 ...
APP内悬浮窗
07-05
APP内悬浮窗
小程序代码实现可拖动的悬浮球
04-03
微信小程序手势操作拓展插件，可拖拽的悬浮球。通过纯原生实现的，有可动可不动的两套效果。更多资源可私信我。哈哈哈
uniapp 小程序 根据角色变更tabbar个数
03-22
在开发小程序时，有时我们需要根据用户的角色或者权限动态地改变底部的TabBar，这在一些具有多用户类型或复杂业务逻辑的应用中非常常见。在uni-app框架中，这个功能可以通过灵活配置和编程来实现。uni-app是一个使用...
小说阅读uniapp小程序
06-27
【标题】"小说阅读uniapp小程序"所涉及的知识点主要集中在使用uniapp框架开发微信小程序，为用户提供在线阅读小说的功能。uniapp是一个基于Vue.js的多端开发框架，支持快速构建跨平台的应用，包括微信小程序、H5、...
【uniapp】悬浮球（floatball）全局组件——全局消息提醒功能
jijunqing321的博客
01-19 3256
已将前期写的全局组件（消息提醒）封装完毕，上传至uniapp组件库。组件能够全局显示，不用每个组件都引用。此组件只适用于app端。 组件地址：添加链接描述 Floatball 悬浮球 主要用于移动端app全局显示悬浮球，进行展示及跳转 使用方法： ①安装vuex npm install vuex -D ③copy插件中mixins，并在项目main.js引入，如： import mixin from './mixins/index.js' Vue.use(mixin) ④copy插件中store，并
uniapp手机端可移动悬浮球组件实现
快来一起学习前端知识把！加油，前端人
04-05 811
uniapp手机端可移动悬浮球组件实现。可直接复制使用
uni-app-悬浮球
阿金的博客
04-24 1049
1.在components中创建drag.vue 代码如下。newadd为触发悬浮球的方法 可根据业务进行编写。2.在需要悬浮球的页面引入次组件。
uniapp开发小程序隐藏掉胶囊按钮
03-27
在Uni-app中，可以通过设置页面的导航栏样式来隐藏小程序的胶囊按钮。具体操作如下： 1. 在App.vue文件中定义全局的导航栏样式： ``` <template> <div> <!-- 定义全局导航栏样式 --> <style lang="scss"> /* 隐藏胶囊按钮 */ .uni-navi-bar .uni-navi-right { display: none !important; } </style> <router-view /> </div> </template> ``` 2. 在需要隐藏胶囊按钮的页面中，设置导航栏的样式为全局导航栏样式： ``` <template> <view> <!-- 设置导航栏样式为全局导航栏样式 --> <navigation-bar :title="title" :background-color="navbarBgColor" :front-color="navbarFontColor" /> <text>这是一个隐藏胶囊按钮的页面</text> </view> </template> <script> export default { data() { return { title: "隐藏胶囊按钮", navbarBgColor: "#ffffff", navbarFontColor: "#000000" }; }, onShow() { // 隐藏小程序胶囊按钮 uni.setNavigationBarStyle({ navigationBarRightButtonPosition: "never" }); } }; </script> ``` 通过设置导航栏样式，可以很方便地隐藏小程序的胶囊按钮。注意，需要在页面的`onShow`生命周期中调用`uni.setNavigationBarStyle`方法来设置导航栏样式。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小莉爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值