实现效果
基础版：悬浮于页面上层，且可左右拖拽并支持吸边（固定到屏幕左侧或右侧），配置多个菜单时，点击可打开更多菜单，拖拽后位置跟随底部打开按钮；如图：
悬浮菜单.png
升级版：当悬浮菜单位置屏幕上半部分时，更多菜单展示在按钮下方，指示图标向上；在左侧时，指示图标靠左，其他方位同理，如图：
悬浮菜单.png
实现原理
- 可拖拽：监听鼠标按下、抬起、拖动；手动触摸开始、触摸结束、触摸移动事件——mousedown、touchstart；mousemove、touchmove；mouseup、touchend；
- 展示：相对屏幕绝对布局，层级处于最高层，拖拽时相对屏幕左上（初始时菜单在右下侧）距离随鼠标或手动事件距离变化；
- 吸边：拖动时计算距离及左右位置，js修改左右距离为固定值；
- 图标：默认图标可配置（从接口获取），多个菜单展开后展示关闭图标；
实现过程
基于angular.js框架，封装为指令组件调用；
- dom及css:
- 单个菜单（moreMenu为false）
<div class="clientRobot-con" id="clientRobot" ng-if="!moreMenu" >
<img ng-src="{{btnItem.boxIcon}}" ng-if="btnItem.boxIcon">
<p ng-if="!btnItem.boxIcon && btnItem.boxTxt">{{btnItem.boxTxt}}</p>
</div>
- 多个菜单(moreMenu为true)
<button class="client-menu-btn" id="clientRobot" ng-if="moreMenu">
<!-- 默认收起时 展示配置的图标 ng-src="mainIcon" -->
<img class="open" ng-src="{{clientBtnIcon}}" ng-show="!menuShow && clientBtnIcon">
<img class="close" ng-src="{{resourcesHome+'float_menu_cls.png'}}" ng-show="menuShow">
</button>
<!-- 透明蒙层 点击收起更多菜单 -->
<div class="more-menu-bg" id="menuControl" ng-show="moreMenu && menuShow"></div>
<!-- positionClass: rightBottom,rightTop,leftBottom,leftTop -->
<ul class="client-menu-list" id="menuList" ng-show="menuShow" ng-class="[positionClass]">
<li class="menu-item" ng-repeat="item in items track by $index" data-index="{{$index}}" type="button">
<img ng-src="{{item.boxIcon}}" ng-if="item.boxIcon">
<span class="txt" >{{item.boxTxt}}</span>
</li>
</ul>
-
js:
逻辑整理如图：
图片.png
function getTipsNewas() {
var flag = false, nx, ny, dx, dy, x, y, cur = {
x: 0,
y: 0
};
function down(event) {
flag = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
cur.x = touch.clientX;
cur.y = touch.clientY;
dx = div2.offsetLeft;
dy = document.documentElement.clientHeight - div2.offsetTop - 72;
}
function move(event) {
event.preventDefault();
if (flag) {
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
nx = touch.clientX - cur.x;
ny = touch.clientY - cur.y;
x = dx + nx;
y = dy - ny;
var clientWidth = document.body.clientWidth - 72；
clientHeight = document.body.clientHeight - 72;
if (x >= clientWidth) {
x = clientWidth;
}
if (x <= 0) {
x = 0;
}
if (y <= 52) {
y = 52;
}
if (y >= clientHeight) {
y = clientHeight;
}
scope.curX = x;//记录当前水平位置，释放后吸边
scope.curY = y; //记录当前垂直位置 更多菜单展开后跟随
// 记录当前垂直位置，菜单列表显示在ICON 上面或下面
if(y < (clientHeight / 2)){
scope.moreMenuUp = !0;
}else{
scope.moreMenuUp = !1;
}
div2.style.left = x + 'px';
div2.style.bottom = y + 'px';
// 阻止页面的滑动默认事件
document.addEventListener('touchmove', function () {
event.preventDefault();
}, false);
}
}
/**
* 鼠标释放时候的函数
* @returns {void}
* 各数值说明
* 25 按钮的半径；50 按钮直径；13 按钮与屏幕左右的最小距离（有间隔吸边）
* 76 按钮位于底部时 按钮的底边距与菜单底边距的差值（按钮高度50+12） | 按钮位于顶部时 按钮的上边距与更多菜单上边距的差值
* */
function end(e, needPostApp) {
flag = false;
var menuY, lastPositionX, lastPositionY;
// 增加吸边方法，按钮及更多菜单靠左或靠右 保持固定距离（参考设计图）
// 25是悬浮菜单宽高的一半长度
if(scope.curX < (document.body.clientWidth / 2) - 36){
scope.positionClass = scope.moreMenuUp ?'leftBottom':'leftTop';
divMenu.style.left = '28px';
divMenu.style.right ='auto';
div2.style.left = '10px';
div2.style.right='auto';
}else{
scope.positionClass = scope.moreMenuUp ?'rightBottom':'rightTop';
divMenu.style.left = 'auto';
divMenu.style.right = '28px';
div2.style.right = '10px';
div2.style.left ='auto';
}
if(scope.moreMenuUp){
menuY = scope.curY + 83;
divMenu.style.top ='auto';
divMenu.style.bottom = menuY + 'px';
}else{
var btnBottom = document.body.clientHeight - 72 - scope.curY;
menuY = btnBottom + 83;
divMenu.style.top = menuY + 'px';
divMenu.style.bottom = 'auto';
}
// y后面减的是适配app位置，两边计算的y轴位置不一致 app才需要回调位置
if (needPostApp && scope.postAppPosition && $env.hybrid) {
scope.postAppPosition({
coordinate: {
x: lastPositionX,
y: lastPositionY + 50 - 22
}
});
}
scope.$apply();
}
var div2 = document.getElementById('clientRobot');
var divMenu = document.getElementById('menuList');
div2.addEventListener('mousedown', function (e) {
down(e);
}, false);
div2.addEventListener('touchstart', function (e) {
down(e);
}, false);
div2.addEventListener('mousemove', function (e) {
move(e);
}, false);
div2.addEventListener('touchmove', function (e) {
move(e);
}, false);
document.body.addEventListener('mouseup', function (e) {
end(e);
}, false);
div2.addEventListener('touchend', function (e) {
end(e, true);
}, false);
}
el.on('click', '#menuControl', function (e) {
// 点击关闭更多菜单
e.stopPropagation();
scope.menuShow = !1;
scope.$apply();
});
el.on('click', '#clientRobot', function (e) {
e.stopPropagation();
if(!scope.moreMenu){
var args={
key:{
item:scope.btnItem
}
}
console.log(args,'args==');
scope.goIndexClick(args);
}else{
// 点击展开更多菜单
scope.moreMenu = !0;
scope.menuShow = !scope.menuShow;
scope.$apply();
}
});
网友评论