更新记录
1.0.0(2025-03-02)
平台兼容性
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));
}
});