uniapp,uni-fab组件拖动属性,替代方案

UniFab 是一款由人工智慧驅動的視訊增強器+ crack UniFab 是一款功能强大的视频处理工具,包括 10 个基于 AI 的功能。使用 UniFab,您可以提高视频和音频质量、将视频转换为不同的格式、根据自己的喜好编辑视频等等 阅读详情
AI摘要

针对uni-fab在uniapp开发中遮挡页面内容的问题,本文介绍两种替代方案:自行编码实现可拖动悬浮按钮和使用第三方开源组件WotDesignUni,后者完美适配并提供高颜值组件。

在这里插入图片描述


1. 背景

最近基于uniapp开发一款设备参数调试的APP软件,其中有使用到悬浮按钮,快速开发阶段,为了能尽快上线,直接使用了uni-ui的扩展组件uni-fab,参考【1】,效果如下图:
在这里插入图片描述
后期,相应的界面内容增多,由于uni-fab是不可移动的,会遮挡页面内容,该组件属性中不带可移动属性,所以考虑替代方案,查了一下,有两种方案,一种是字节开发一个组件,另一种是使用第三方开源组件。本文主要记录第二种方案的使用细节。


2. 替代方案

2.1 方案一

参考【2】、【3】,自己编码实现,因为博主已经用了uni-fab,悬浮按钮中子按钮和逻辑已经写好,不想大改,故放弃了该方案,感兴趣的小伙伴可以尝试一下。


2.2 方案二

参考【4】,使用第三方免费插件,完美替代uni-fab。

在这里插入图片描述
使用该组件分两步:
第一步:将Wot Design Uni组件导入自己的工程
参考【5】
在这里插入图片描述


导入成功后,在本地工程中可以看到:
在这里插入图片描述

第一步:直接使用
参考【4】中的示例代码
在这里插入图片描述


参考

【1】uni-fab
【2】使用uniapp实现全局悬浮按钮(可拖动)
【3】uniapp一篇教你怎么写悬浮窗可拖动
【4】Fab 悬浮按钮
【5】wot-design-uni 基于vue3+Typescript的高颜值组件库

鸿蒙OS&UniApp 制作悬浮按钮与菜单组件#三方框架 #Uniapp 支持自定义图标、颜色、阴影、动画等;支持展开多个操作菜单,支持自定义菜单项;兼容多端,尤其是 HarmonyOS 设备的适配和体验优化;支持拖拽、吸边、自动隐藏等高级交互。自定义悬浮按钮与菜单不仅能满足个性化需求,还能提升整体产品体验和品牌一致性。基于 UniApp 的悬浮按钮与菜单组件方案,既能兼容 HarmonyOS 生态,也能满足多端统一开发需求。通过灵活的样式定制、动画优化和交互扩展,可以为用户带来高效、友好的操作体验。希望本文能为你的鸿蒙/UniApp 项目提供实用参考。 阅读详情

相关推荐

uni-fab彩色悬浮按钮

将此代码复制到unimoudle下的uni-fab.vue内直接可以用

AURIX TC397开发板到手第一步:用iLLD库驱动LED流水灯(附完整代码)

本文详细介绍了如何使用英飞凌AURIX TC397开发板和iLLD库实现LED流水灯效果。从开发环境配置到硬件连接,再到完整的代码实现,逐步引导开发者完成项目。文章还提供了优化建议和常见问题解决方案,帮助嵌入式开发新手快速上手。

weixin_30911451的博客 390

Vivado新手避坑指南:搞懂Generate Output Products和Create HDL Wrapper到底在干啥

本文深入解析Vivado设计流程中的Generate Output Products和Create HDL Wrapper两大关键步骤,帮助新手理解其核心功能与操作要点。通过详细讲解文件生成类型、关键选项设置及常见问题解决方案,指导开发者正确使用这两个功能,避免设计流程中的常见错误,提高FPGA开发效率。

weixin_29207149的博客 310

用C#和MQTTnet在WinForm里做个简易物联网监控后台(附完整源码)

本文详细介绍了如何使用C#和MQTTnet库在WinForm中构建一个简易物联网监控后台。通过实战案例,包括环境配置、MQTT服务端实现、客户端监控功能及高级优化技巧,帮助开发者快速搭建高效的物联网监控系统,适用于工业自动化和智能家居场景。

weixin_29540599的博客 392

论文理解【LLM-Clarification】—— 【QDrawer】Asking the Right Question at the Right Time: Human and Model Unce

本文基于 CoDraw 任务对 LLM 澄清提问的触发方式进行探索,发现模型内部不确定性与人类澄清决策相关性弱,使用不确定性阈值触发澄清提问相比模仿人类提问时机,性能和计算效率都更好

佚失的诗篇 770

clang-tidy 使用指南

clang-tidy 需要一个编译数据库来了解如何编译你的代码。编译数据库通常是一个名为 compile_commands.json 的文件。在这个示例中,clang-tidy 会对 test.cpp 文件进行分析,并报告任何潜在的问题。例如,它可能会警告 test 函数中的未使用变量 x。clang-tidy 是一个用于 C++ 代码的静态分析工具,可以帮助你发现代码中的潜在问题和改进点。这将在 build 目录中生成一个 compile_commands.json 文件。

weixin_42244181的博客 2360

基于stm32的数控恒压恒流电源设计方案

基于stm32的数控恒压恒流电源设计方案 基于stm32的数控恒压恒流电源设计方案 不包实物,可自己动手制作,可代做 本设计采用220V市电输入工频变压器,将220V交流电压降为24V交流电压,经过全桥整流加电容滤波,输出约32V直流电压.可调输出电压方案采用线性稳压调整器方案,即运放处于比较调整状态,运放输出驱动P型MOS管,电压输出端由电阻分压反馈至运放同相输入端,运放反相输入端由STM32单片机控制TLC5615数模转换器输入模拟电压,根据运放构成比较器原理,运放的同相端和反相端始终趋向于电压相等的特

m0_72265581的博客 7221

技术面 - 手撕算法题整理

这篇博客整理了华为OD面试中涉及的算法题,包括LeetCode热门题目、OD原题和需要手写的算法,如二分查找、冒泡排序等。建议优先刷"hot100"的LeetCode题目,全刷OD原题,以及掌握手撕算法的基本原理。

m0_73659489的博客 1024

ICLR 2025 | MambaPEFT: 探索针对Mamba的参数高效微调方法

通过利用海量数据构建大型模型,基于Transformer的模型生态系统已逐步确立。参数高效微调(PEFT)是一项至关重要的技术,它能以最低成本将这些模型应用于下游任务,同时实现高效的性能表现。最近,基于状态空间模型(SSM)的Mamba模型作为Transformer的潜在替代方案受到了广泛关注。尽管已经提出了许多基于Mamba的大规模模型,但如何高效地将预训练的Mamba模型应用于下游任务仍有待研究。在本文中,作者对适用于Mamba的PEFT方法展开了探索性分析。

小白学视觉 326

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

上一篇: 地平线J5芯片与同级别芯片的对比
下一篇: 嵌入式软件工程师必备工具集合(强烈推荐!!!持续更新......)
智驾
博客等级 码龄11年 6670粉丝 574原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

智驾

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

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

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

打赏作者

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

抵扣说明:

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

余额充值