floatButton模块demo示例

52yaoer

floatButton 用原生代码实现了在app内部实现悬浮按钮功能。

点击进入模块详情

<!DOCTYPE html>
<html>
<head>
<title>Module Develop</title>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<style type="text/css">
html,
body {
height: 100%
}
body {
background-color: #fff;
margin: 0;
}
#wrap {
height: 100%;
position: relative;
}
#header {
padding-top: 20px;
background-color: #5082c2;
height: 44px;
position: relative;
}
#header h1 {
font-size: 20px;
height: 44px;
line-height: 44px;
margin: 0em;
color: #fff;
margin-left: 100px;
margin-right: 100px;
text-align: center;
}
#main {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
}
a.button {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 32px;
margin: 8px;
background-color: rgba(240, 240, 240, 1.0);
border-color: rgba(220, 220, 220, 1.0);
border-width: 2px;
border-style: solid;
}
a.active {
background-color: rgba(240, 240, 240, 0.7);
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a class="button" tapmode="active" onclick="setOnCoordinateListener()">坐标移动监听</a>
<a class="button" tapmode="active" onclick="setOnClickListener()">按钮点击监听</a>
<a class="button" tapmode="active" onclick="openButton()">打开悬浮按钮</a>
<a class="button" tapmode="active" onclick="hidenButton()">隐藏悬浮按钮</a>
<a class="button" tapmode="active" onclick="showButton()">显示悬浮按钮</a>
<a class="button" tapmode="active" onclick="closeButton()">关闭悬浮按钮</a>
<a class="button" tapmode="active" onclick="updateButtonPic()">修改悬浮按钮图片</a>
<a class="button" tapmode="active" onclick="startAnimation()">开启旋转动画</a>
<a class="button" tapmode="active" onclick="stopAnimation()">停止旋转动画</a>
<a class="button" tapmode="active" onclick="startMove()">开启移动</a>
<a class="button" tapmode="active" onclick="stopMove()">停止移动</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
var demo;
function apiready() {
demo = api.require('floatButton');
if (!demo) {
alert("请添加模块后编译");
return;
}
}
function setOnCoordinateListener() {
demo.setOnCoordinateListener(function(ret, err) {
api.toast({
msg: JSON.stringify(ret)
});
});
}
function setOnClickListener() {
demo.setOnClickListener(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function openButton() {
demo.openButton({
rect: {
x: 10,
y: 10,
w: 60,
h: 60
},
lineColor: '#000000',
btnPic: 'widget://image/refresh.png'
}, function(ret, err) {
alert(JSON.stringify(ret));
});
}
function closeButton() {
demo.closeButton(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function hidenButton() {
demo.hidenButton(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function showButton() {
demo.showButton(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function updateButtonPic() {
demo.updateButtonPic({
btnPic: 'widget://image/refresh.png'
}, function(ret, err) {
alert(JSON.stringify(ret));
});
}
function startAnimation() {
demo.startAnimation(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function stopAnimation() {
demo.stopAnimation(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function startMove() {
demo.startMove(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function stopMove() {
demo.stopMove(function(ret, err) {
alert(JSON.stringify(ret));
});
}
</script>
</html>

复制代码

Mr.ZhouHeng

66感谢分享

sunny_雪儿

请问一下这个免费试用模块，不能用吗

52yaoer

可以用的，，，

中国石头

52yaoer 发表于 2019-6-26 11:07
可以用的，，，

点击软件提示我未受信任的企业级开发者

jinrui

一个frame里只能打开一个悬浮按钮吗？

52yaoer

小王姐姐 · 回复于2020-10-22 16:38:11

ios 不能使用gif图片么，为啥会闪退呢

52yaoer · 回复于2020-10-22 17:02:23

小王姐姐发表于 2020-10-22 16:38
ios 不能使用gif图片么，为啥会闪退呢

用的是最新版本么？我这里测试可以

小王姐姐 · 回复于2020-10-22 17:03:52

是最新版本，我这边就是闪退，可以看这个https://community.apicloud.com/bbs/thread-166925-1-1.html