更新记录

1.0.0(2025-03-02)

  • 发布插件

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.45,Android:5.0,iOS:不支持,HarmonyNext:不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

概述

  • 支持控制悬浮窗自定义显示(支持多个显示),隐藏,修改,位置,尺寸,拖动
  • 支持悬浮窗点击事件
  • 支持悬浮窗显示到应用外

温馨提示 如何调用插件

  import {
  initIcon,
  showIcon,
  hideIcon,
  changeIcon,
  getResourcePath
} from "@/uni_modules/yuange-floatwindow"

初始化

let p = {
  widthRatio: this.widthRatio, //根据屏幕宽度比例,设置悬浮窗宽度
  heightRatio: this.heightRatio, //根据屏幕宽度比例,设置悬浮窗高度
  xRatio: this.xRatio, //根据屏幕宽度比例,设置悬浮窗x轴起始位置
  yRatio: this.yRatio, //根据屏幕高度比例,设置悬浮窗y轴起始位置
  moveType: this.moveType, //拖动效果,1:不可拖动、2:任意拖动、3:贴边拖动、4:回弹拖动
  slideLeftMargin: this.slideLeftMargin, //左侧贴边位置,支持负数
  slideRightMargin: this.slideRightMargin, //右侧贴边位置,支持负数
  duration: this.duration, //间隔时间ms
  tag: this.tag, //为该弹窗设置标识,以做区分,用于多个
  iconPath: getResourcePath('logo.png')  //当前工程static目录下图片路径
};
initIcon(JSON.stringify(p), {
  success(res) {
    console.log(JSON.stringify(res));
  },
  fail(err) {
    console.log(JSON.stringify(err));
  }
});

显示悬浮窗

  let p = {
  tag: this.tag
};
showIcon(JSON.stringify(p), {
  success(res) {
    //点击事件的回调也在这里 例如 {"data":"{\"action\":\"click\",\"tag\":\"default_float_window_tag\"}","code":200,"msg":"操作成功"}
    console.log(JSON.stringify(res));
  },
  fail(err) {
    console.log(JSON.stringify(err));
  }
});

隐藏悬浮窗

 let parm = {
  tag: this.tag
}
hideIcon(JSON.stringify(parm), {
  success(res) {
    console.log(JSON.stringify(res));
  },
  fail(err) {
    console.log(JSON.stringify(err));
  }
});

修改悬浮窗

//getResourcePath接口是传入项目根目录static文件夹下的图片名称
const staticPath = getResourcePath('logo.png')
console.log('static路径:', staticPath);
let parm = {
  tag: this.tag,
  iconPath: staticPath
}
changeIcon(JSON.stringify(parm), {
  success(res) {
    console.log(JSON.stringify(res));
  },
  fail(err) {
    console.log(JSON.stringify(err));
  }
});

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问