uniapp实现界面可任意拖动小图标
创始人
2024-05-12 11:28:43

uniapp实现界面可任意拖动小图标

  • 一、问题：
  • 二、解决步骤
    • 2.1 根据uni-app官方提供的案例，创建组件
    • 2.2 在需要的界面引入组件使用
  • 额外注意

一、问题：

例如购物车小图标可任意拖动
在这里插入图片描述

二、解决步骤

2.1 根据uni-app官方提供的案例，创建组件

创建 car.vue组件， 将如下代码复制到该文件.

2.2 在需要的界面引入组件使用

单独界面引入组件

  1. 引入组件
    在这里插入图片描述
  2. 在components中可设置别名，如下方式也可以
    在这里插入图片描述
  3. 通过标签可使用了

在这里插入图片描述

如果多个界面使用，可以在main.js中挂载组件
在这里插入图片描述

额外注意

官方案例地址

官方案例的初始位置为top:50px left:50px, 如何初始到右下角？

  1. 在css样式中设置绝对定位为右下角

在这里插入图片描述

  1. 注意设置监听函数内也有一个设置初始位置的地方，如下；

touch.pageX会获取到界面的横向像素，
lastLeft是偏移的量， right：50px 其实就是页面横向像素减去50的地址
bottom同理
在这里插入图片描述

上一篇：如何帮助管理者改进 1:1 面谈和绩效考核

下一篇：秒懂 Java CountDownLatch

相关内容

热门资讯

新华视点｜文旅新体验让传统“潮... ■当敦煌壁画遇上花灯敦煌灯会以“千年华彩 盛世敦煌”为主题，主要分为三个区域：敦煌夜市商业街、西域路...
玉米淀粉商品报价动态（2026... 生意社01月10日讯 交易商品牌/产地交货地最新报价玉米淀粉　食品级含量99河南汇亿海...
欧空局向“可回收”低头，计划魔... 　　炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！ （来源：IT之家）I...
“马”上尝鲜，进一步激发新春消... （来源：劳动报）转自：劳动报依托供应链升级与“金牌挑手”严选体系，联华于2026新年之际，正式推出“...
华硕 CES 2026亮点速递... 在CES 2026这场科技盛会上，华硕携众多新品亮相。除了主板等核心PC硬件，迷你主机产品线也迎来重...