lc-fab-touch的贴边隐藏原理
悬浮按钮的贴边原理简单来说就是用屏幕的宽度或高度减去球的一半的宽度或高度，从而实现隐藏效果。
也就如上图所示，悬浮按钮和屏幕的宽度和高度表示。
上图指向的就是对于悬浮按钮的初始位置计算
// that.safeArea.minLeft 代表靠左
// that.safeArea.maxLeft 代表靠右
// that.safeArea.minTop 代表靠下
// that.safeArea.maxTop 代表靠上这是箭头指向位置，即是靠边隐藏的实现代码。想要取消就不能将用悬浮按钮的宽和高除以2去计算，即直接减去整个按钮的宽或高，从而使按钮完全展露出来。
解决办法：
// 计算悬浮球初始位置
initDragBall(){
console.log('initDragBall');
let that = this;
try {
uni.createSelectorQuery().in(this).select('#drag-ball').fields({
size: true
}, dragBallSize => {
// dragBallSize就是球的大小，
// 球的宽
that.width = dragBallSize.width;
// 球的高
that.height = dragBallSize.height;
uni.getSystemInfo({
success: function(res) {
that.safeArea.windowWidth = res.windowWidth;
that.safeArea.windowHeight = res.windowHeight;
if (that.orientation === 'landscape') {
// dragBallSize.height / 2就是贴边（也就是显示一半）
// that.safeArea.minTop = -parseInt(dragBallSize.height / 2);
// that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize.height / 2);
// 这里是为了初始位置不再自动贴边（就是显示半个）
that.safeArea.minTop = -parseInt(dragBallSize.height);
that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize.height);
that.safeArea.minLeft = parseInt(0.06 * res.windowWidth);
that.safeArea.maxLeft = parseInt(0.94 * res.windowWidth) - dragBallSize.width;
that.left = that.safeArea.minLeft;
that.top = that.safeArea.minTop;
// that.left = that.safeArea.maxLeft;
// that.top = that.safeArea.maxTop;
} else {
that.safeArea.minTop = parseInt(0.06 * res.windowHeight);
that.safeArea.maxTop = parseInt(0.94 * res.windowHeight) - dragBallSize.height;
// dragBallSize.height / 2就是贴边（也就是显示一半）
// that.safeArea.minLeft = -parseInt(dragBallSize.width / 2);
// that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize.width / 2);
// 这里是为了初始位置不再自动贴边（就是显示半个）
that.safeArea.minLeft = -parseInt(dragBallSize.width);
that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize.width );
// 右下角
that.left = that.safeArea.maxLeft;
that.top = that.safeArea.minTop;
if(that.vertical2 == 'bottom') {
that.top = that.safeArea.maxTop / 1.2;
}
// 左上角
// that.left = that.safeArea.minLeft;
// that.top = that.safeArea.maxTop;
// that.safeArea.minLeft 代表靠左
// that.safeArea.maxLeft 代表靠右
// that.safeArea.minTop 代表靠下
// that.safeArea.maxTop 代表靠上
}
that.showDragBall();
}
});
}).exec();
} catch (e) {
//TODO handle the exception
console.log(e);
}
},下面是我将其他隐藏修改：
<template>
<view class="uni-cursor-point ">
<view v-if="(popMenu && (leftBottom||rightBottom||leftTop||rightTop) && 0 < content.length) && showMenu"
:class="{
'lc-fab-touch--leftBottom': leftBottom,
'lc-fab-touch--rightBottom': rightBottom,
'lc-fab-touch--leftTop': leftTop,
'lc-fab-touch--rightTop': rightTop
}"
class="lc-fab-touch " :style="{top : contTop2+'px',left :contLeft2}" style="height: 55px;border: 0px solid green;">
<view :class="{
'lc-fab-touch__content--left': horizontal2 === 'left',
'lc-fab-touch__content--right': horizontal2 === 'right',
'lc-fab-touch__content--flexDirection': direction === 'vertical',
'lc-fab-touch__content--flexDirectionStart': flexDirectionStart,
'lc-fab-touch__content--flexDirectionEnd': flexDirectionEnd,
'lc-fab-touch__content--other-platform': !isAndroidNvue
}"
:style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor}" class="lc-fab-touch__content"
elevation="5" style="border: 0px solid red;">
<view v-if="flexDirectionStart || horizontalLeft" class="lc-fab-touch__item lc-fab-touch__item--first" />
<view v-for="(item, index) in content" :key="index" :class="{ 'lc-fab-touch__item--active': isShow }" class="lc-fab-touch__item"
@click="_onItemClick(index, item)">
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="lc-fab-touch__item-image" mode="widthFix" />
<text class="lc-fab-touch__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
</view>
<view v-if="flexDirectionEnd || horizontalRight" class="lc-fab-touch__item lc-fab-touch__item--first" />
</view>
</view>
<view
:class="[{
'lc-fab-touch__circle--leftBottom': leftBottom,
'lc-fab-touch__circle--rightBottom': rightBottom,
'lc-fab-touch__circle--leftTop': leftTop,
'lc-fab-touch__circle--rightTop': rightTop,
'lc-fab-touch__content--other-platform': !isAndroidNvue,
'active':!dragMoveSatus
}]"
class="lc-fab-touch__circle lc-fab-touch__plus drag-ball-box" :style="{ 'background-color': styles.buttonColor,left:left+'px',top :top+'px'} "
@click="_onClick" id="drag-ball" @touchstart="dragStart" @touchmove="dragMove" @touchend="dragEnd">
<view class="fab-circle-v" :class="{'lc-fab-touch__plus--active': isShow && content.length > 0}"></view>
<view class="fab-circle-h" :class="{'lc-fab-touch__plus--active': isShow && content.length > 0}"></view>
</view>
</view>
</template>
<script>
let platform = 'other'
// #ifdef APP-NVUE
platform = uni.getSystemInfoSync().platform
// #endif
/**
* Fab 悬浮按钮
* @description 点击可展开一个图形按钮菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=144
* @property {Object} pattern 可选样式配置项
* @property {Object} horizontal = [left | right] 水平对齐方式
* @value left 左对齐
* @value right 右对齐
* @property {Object} vertical = [bottom | top] 垂直对齐方式
* @value bottom 下对齐
* @value top 上对齐
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
* @value horizontal 水平显示
* @value vertical 垂直显示
* @property {Array} content 展开菜单内容配置项
* @property {Boolean} popMenu 是否使用弹出菜单
* @event {Function} trigger 展开菜单点击事件，返回点击信息
* @event {Function} fabClick 悬浮按钮点击事件
*/
export default {
name: 'UniFab',
props: {
pattern: {
type: Object,
default () {
return {}
}
},
horizontal: {
type: String,
default: 'right'
},
vertical: {
type: String,
default: 'bottom'
},
direction: {
type: String,
default: 'horizontal'
},
content: {
type: Array,
default () {
return []
}
},
show: {
type: Boolean,
default: false
},
popMenu: {
type: Boolean,
default: true
}
},
data() {
return {
fabShow: false,
isShow: false,
isAndroidNvue: platform === 'android',
styles: {
color: '#3c3e49',
selectedColor: '#007AFF',
backgroundColor: '#fff',
buttonColor: '#007AFF'
},
showMenu: false,
horizontal2: 'left',
vertical2: 'bottom',
orientation: 'portrait',
safeArea: {
minTop: 0,
maxTop: 0,
minLeft: 0,
maxLeft: 0,
windowWidth: 0,
windowHeight: 0
},
dragMoveSatus: true,
dragEndInfo: {
type: null,
coordinate: null
},
width: 0,
height: 0,
left: 0,
top: 0
}
},
computed: {
contLeft2() {
if(this.horizontal2 == 'right') {
// console.log('left'+this.left)
if(this.left == this.safeArea.maxLeft || this.left >= this.safeArea.maxLeft-20 ) {
return this.left+30 + 'px';
} else {
if(this.direction == 'vertical') { // 垂直
return this.left + 'px';
} else {
return this.left - (this.content.length) * 55-10 + 'px';
}
return 'unset';
}
} else {
return this.left - 10+'px';
}
},
contTop2() {
if(this.direction == 'vertical') {
if(this.vertical2 == 'top') {
return this.top + ((this.content.length) * 30);
}
return this.top - ((this.content.length) * 30);
}
return this.top;
},
contentWidth(e) {
return (this.content.length + 1) * 55 + 10 + 'px'
},
contentWidthMin() {
return 55 + 'px'
},
// 动态计算宽度
boxWidth() {
return this.getPosition(3, 'horizontal')
},
// 动态计算高度
boxHeight() {
return this.getPosition(3, 'vertical')
},
// 计算左下位置
leftBottom() {
return this.getPosition(0, 'left', 'bottom')
},
// 计算右下位置
rightBottom() {
return this.getPosition(0, 'right', 'bottom')
},
// 计算左上位置
leftTop() {
return this.getPosition(0, 'left', 'top')
},
rightTop() {
return this.getPosition(0, 'right', 'top')
},
flexDirectionStart() {
return this.getPosition(1, 'vertical', 'top')
},
flexDirectionEnd() {
return this.getPosition(1, 'vertical', 'bottom')
},
horizontalLeft() {
return this.getPosition(2, 'horizontal', 'left')
},
horizontalRight() {
return this.getPosition(2, 'horizontal', 'right')
}
},
watch: {
pattern(newValue, oldValue) {
//console.log(JSON.stringify(newValue))
this.styles = Object.assign({}, this.styles, newValue)
}
},
created() {
this.isShow = this.show;
if (this.top === 0) {
this.fabShow = true
}
// 初始化样式
this.styles = Object.assign({}, this.styles, this.pattern);
this.horizontal2 = this.horizontal;
this.vertical2 = this.vertical;
},
mounted: function() {
this.initDragBall();
},
methods: {
_onClick() {
this.$emit('fabClick')
if (!this.popMenu) {
return
}
if(this.showMenu) {
this.showMenu = false;
} else {
this.showMenu = true;
}
this.isShow = !this.isShow;
// linc 20210714 当展开菜单时不自动隐藏
if(!this.showMenu) {
// 隐藏
setTimeout(function(that) {
if(!that.dragMoveSatus && !that.showMenu){
that[that.dragEndInfo.type] = that.dragEndInfo.coordinate;
}
}, 1500, this);
}
if(this.left >= this.safeArea.maxLeft-40) {
this.horizontal2 ='right';
// this.horizontal ='right';
}
if(this.left <= this.safeArea.minLeft+30) {
this.horizontal2 ='left';
// this.horizontal ='left';
}
},
open() {
this.isShow = true;
},
close() {
this.isShow = false;
},
/**
* 按钮点击事件
*/
_onItemClick(index, item) {
this._onClick();
if(item.type == 'top') {
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
} else {
this.$emit('trigger', {
index,
item
})
}
},
/**
* 获取 位置信息
*/
getPosition(types, paramA, paramB) {
if (types === 0) {
return this.horizontal2 === paramA && this.vertical2 === paramB
} else if (types === 1) {
return this.direction === paramA && this.vertical2 === paramB
} else if (types === 2) {
return this.direction === paramA && this.horizontal2 === paramB
} else {
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
}
},
// 计算悬浮球初始位置
initDragBall(){
console.log('initDragBall');
let that = this;
try {
uni.createSelectorQuery().in(this).select('#drag-ball').fields({
size: true
}, dragBallSize => {
// dragBallSize就是球的大小，
// 球的宽
that.width = dragBallSize.width;
// 球的高
that.height = dragBallSize.height;
uni.getSystemInfo({
success: function(res) {
that.safeArea.windowWidth = res.windowWidth;
that.safeArea.windowHeight = res.windowHeight;
if (that.orientation === 'landscape') {
// dragBallSize.height / 2就是贴边（也就是显示一半）
// that.safeArea.minTop = -parseInt(dragBallSize.height / 2);
// that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize.height / 2);
// 这里是为了初始位置不再自动贴边（就是显示半个）
that.safeArea.minTop = -parseInt(dragBallSize.height);
that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize.height);
that.safeArea.minLeft = parseInt(0.06 * res.windowWidth);
that.safeArea.maxLeft = parseInt(0.94 * res.windowWidth) - dragBallSize.width;
that.left = that.safeArea.minLeft;
that.top = that.safeArea.minTop;
// that.left = that.safeArea.maxLeft;
// that.top = that.safeArea.maxTop;
} else {
that.safeArea.minTop = parseInt(0.06 * res.windowHeight);
that.safeArea.maxTop = parseInt(0.94 * res.windowHeight) - dragBallSize.height;
// dragBallSize.height / 2就是贴边（也就是显示一半）
// that.safeArea.minLeft = -parseInt(dragBallSize.width / 2);
// that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize.width / 2);
// 这里是为了初始位置不再自动贴边（就是显示半个）
that.safeArea.minLeft = -parseInt(dragBallSize.width);
that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize.width );
// 右下角
that.left = that.safeArea.maxLeft;
that.top = that.safeArea.minTop;
if(that.vertical2 == 'bottom') {
that.top = that.safeArea.maxTop / 1.2;
}
// 左上角
// that.left = that.safeArea.minLeft;
// that.top = that.safeArea.maxTop;
// that.safeArea.minLeft 代表靠左
// that.safeArea.maxLeft 代表靠右
// that.safeArea.minTop 代表靠下
// that.safeArea.maxTop 代表靠上
}
that.showDragBall();
}
});
}).exec();
} catch (e) {
//TODO handle the exception
console.log(e);
}
},
showDragBall() {
setTimeout(function(that) {
that.dragMoveSatus = false;
}, 1000, this);
},
// 手指触摸悬浮球动作开始
dragStart(event) {
if (this.orientation === 'landscape') {
if (this.top === this.safeArea.minTop) {
this.top += parseInt(this.height / 2); // 上面
} else if (this.top === this.safeArea.maxTop) {
this.top -= parseInt(this.height / 2); // 下面
}
} else {
if (this.left === this.safeArea.minLeft) {
this.left += parseInt(this.width / 2); // 左面
} else if (this.left === this.safeArea.maxLeft) {
this.left -= parseInt(this.width / 2); // 右面
}
}
},
// 手指触摸后移动
dragMove(event) {
if (!this.dragMoveSatus) {
this.dragMoveSatus = true;
}
// 定位触摸焦点及移动位置
this.top = event.touches[0].clientY - parseInt(this.height /2);
this.left = event.touches[0].clientX - parseInt(this.width /2);
},
// 手指触摸悬浮球动作结束，贴边并延迟隐藏
dragEnd(event) {
console.log('event',event);
this.dragMoveSatus = false;
if (this.orientation === 'landscape') {
let halfWindowHeight = parseInt(this.safeArea.windowHeight / 2),
// 贴边隐藏
// halfDragBallHeight = parseInt(this.height /2);
// 只贴边不隐藏
halfDragBallHeight = parseInt(this.height);
this.dragEndInfo.type = 'top';
if (this.top < halfWindowHeight) {
this.dragEndInfo.coordinate = this.safeArea.minTop;
this.top = this.safeArea.minTop + halfDragBallHeight;
this.vertical2 = 'top'; // 根据拖拽后高度自动适配展示模式
} else {
this.dragEndInfo.coordinate = this.safeArea.maxTop;
this.top = this.safeArea.maxTop - halfDragBallHeight;
this.vertical2 = 'bottom'; // 根据拖拽后高度自动适配展示模式
}
} else {
let halfWindowWidth = parseInt(this.safeArea.windowWidth / 2),
// 贴边隐藏
// halfDragBallWidth = parseInt(this.width / 2);
// 只贴边不隐藏
halfDragBallWidth = parseInt(this.width);
this.dragEndInfo.type = 'left';
if (this.left < halfWindowWidth) {
this.dragEndInfo.coordinate = this.safeArea.minLeft;
this.left = this.safeArea.minLeft + halfDragBallWidth;
this.horizontal2 = 'left'; // 根据拖拽后高度自动适配展示模式
} else {
this.dragEndInfo.coordinate = this.safeArea.maxLeft;
// 靠右一个球的距离
// this.left = this.safeArea.maxLeft - halfDragBallWidth;
// 跟右边没有距离（贴边）
this.left = this.safeArea.maxLeft;
this.horizontal2 = 'right'; // 根据拖拽后高度自动适配展示模式
}
let halfWindowHeight = parseInt(this.safeArea.windowHeight);
if (this.top < halfWindowHeight) {
this.vertical2 = 'top';
} else {
this.vertical2 = 'bottom';
}
}
// 位置容错计算
if (this.top < this.safeArea.minTop) {
this.top = this.safeArea.minTop;
} else if (this.top > this.safeArea.maxTop) {
this.top = this.safeArea.maxTop;
}
if (this.left < this.safeArea.minLeft) {
this.left = this.safeArea.minLeft;
console.log(this.left + 'right');
} else if (this.left > this.safeArea.maxLeft) {
this.left = this.safeArea.maxLeft;
console.log(this.left + 'left');
}
// console.log(this.vertical2 + this.horizontal2);
}
}
}
</script>
<style lang="scss" scoped>
.lc-fab-touch {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
z-index: 10;
}
.uni-cursor-point {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.lc-fab-touch--active {
opacity: 1;
}
.lc-fab-touch--leftBottom {
left: 5px;
bottom: 20px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px;
}
.lc-fab-touch--leftTop {
left: 5px;
top: 30px;
/* #ifdef H5 */
left: calc(5px + var(--window-left));
top: calc(30px + var(--window-top));
/* #endif */
padding: 10px;
}
.lc-fab-touch--rightBottom {
right: 0px;
bottom: 20px;
/* #ifdef H5 */
// right: calc(5px + var(--window-right));
bottom: calc(20px + var(--window-bottom));
/* #endif */
padding: 10px 0;
}
.lc-fab-touch--rightTop {
// right: 0px;
top: 30px;
/* #ifdef H5 */
// right: calc(5px + var(--window-right));
top: calc(30px + var(--window-top));
/* #endif */
padding: 0;
padding-top: 10px;
}
.lc-fab-touch__circle {
position: fixed;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
background-color: #3c3e49;
border-radius: 55px;
z-index: 11;
}
.lc-fab-touch__circle--leftBottom {
left: 15px;
bottom: 30px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.lc-fab-touch__circle--leftTop {
left: 15px;
top: 40px;
/* #ifdef H5 */
left: calc(15px + var(--window-left));
top: calc(40px + var(--window-top));
/* #endif */
}
.lc-fab-touch__circle--rightBottom {
right: 15px;
bottom: 30px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
bottom: calc(30px + var(--window-bottom));
/* #endif */
}
.lc-fab-touch__circle--rightTop {
right: 15px;
top: 40px;
/* #ifdef H5 */
right: calc(15px + var(--window-right));
top: calc(40px + var(--window-top));
/* #endif */
}
.lc-fab-touch__circle--left {
left: 0;
}
.lc-fab-touch__circle--right {
right: 0;
}
.lc-fab-touch__circle--top {
top: 0;
}
.lc-fab-touch__circle--bottom {
bottom: 0;
}
.lc-fab-touch__plus {
font-weight: bold;
}
.fab-circle-v {
position: absolute;
width: 3px;
height: 31px;
left: 26px;
top: 12px;
background-color: white;
transform: rotate(0deg);
transition: transform 0.3s;
}
.fab-circle-h {
position: absolute;
width: 31px;
height: 3px;
left: 12px;
top: 26px;
background-color: white;
transform: rotate(0deg);
transition: transform 0.3s;
}
.lc-fab-touch__plus--active {
transform: rotate(135deg);
}
.lc-fab-touch__content {
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
/* #endif */
flex-direction: row;
border-radius: 55px;
overflow: hidden;
transition-property: width, height;
transition-duration: 0.2s;
width: 55px;
border-color: #DDDDDD;
border-width: 1rpx;
border-style: solid;
}
.lc-fab-touch__content--other-platform {
border-width: 0px;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.lc-fab-touch__content--left {
justify-content: flex-start;
}
.lc-fab-touch__content--right {
justify-content: flex-end;
}
.lc-fab-touch__content--flexDirection {
flex-direction: column;
justify-content: flex-end;
}
.lc-fab-touch__content--flexDirectionStart {
flex-direction: column;
justify-content: flex-start;
}
.lc-fab-touch__content--flexDirectionEnd {
flex-direction: column;
justify-content: flex-end;
}
.lc-fab-touch__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity 0.2s;
}
.lc-fab-touch__item--active {
opacity: 1;
}
.lc-fab-touch__item-image {
width: 25px;
height: 25px;
margin-bottom: 3px;
}
.lc-fab-touch__item-text {
color: #FFFFFF;
font-size: 12px;
}
.lc-fab-touch__item--first {
width: 55px;
}
.drag-ball-box {
position: fixed;
overflow: hidden;
border-radius: 50%;
z-index: 109;
&.portrait {
width: 55px;
height: 55px;
}
&.landscape {
width: 40rpx;
height: 40rpx;
}
&.active {
transition: .3s;
}
.item-group {
width: 100%;
height: 100%;
.item-image {
width: 100%;
height: 100%;
}
}
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
