<template>
<!-- 子组件 -->
<view class="float_button">
<!-- :style="{'width': itemWidth + 'px','margin':'5px 10px', 'height': itemHeight + 'px', 'left': left + 'px', 'top': top + 'px'}"-->
<view
id="btnHome"
@click="onBtnClicked"
ref="floatButton"
class="float_info"
:style="{'left': left + 'px', 'top': top + 'px','opacity':opacity, }">
<view class="text">
<u-icon name="home-fill" color="#ffffff" size="24"></u-icon>
<text>首页</text>
</view>
</view>
</view>
</template>
<script>
let mySelf;
var mo=function(e){e.preventDefault();};
function stop(){
document.body.style.overflow='hidden';
document.addEventListener("touchmove",mo,{passive:false});//禁止页面滑动
}
/***取消滑动限制***/
function move(){
document.body.style.overflow='';//出现滚动条
document.removeEventListener("touchmove",mo,{passive:false});
}
export default {
data() {
return {
clientWidth: 0,
clientHeight: 0,
timer: null,
currentTop: 0,
left: 0,
top: 0,
itemWidth: 54, //按钮宽度
isShort: true,
itemHeight: 54, // 悬浮按钮高度
gapWidth: 5, // 距离左右两边距离
coefficientHeight: 0.6, // 从上到下距离比例
opacity:0.5,
}
},
props: {},
computed: {},
created() {
// console.log('屏幕宽度', document.documentElement.clientWidth)
// console.log('屏幕高度度', document.documentElement.clientHeight)
let type = navigator.userAgent;
// console.log('设备', type)
this.clientWidth = document.documentElement.clientWidth
this.clientHeight = document.documentElement.clientHeight
// this.left = this.clientWidth - this.itemWidth - this.gapWidth - 20;
this.left = this.clientWidth - this.itemWidth - this.gapWidth;
this.top = this.clientHeight * this.coefficientHeight
},
watch: {
left(n, o) {
}
},
methods: {
onBtnClicked() {
console.log('点击了按钮--->',11)
uni.reLaunch({
url: "/index-new/index",
});
},
handleScrollStart() {
console.log('这是啥时候触发呀？ScrollStart')
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.handleScrollEnd()
}, 300)
this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
if (this.left > this.clientWidth / 2) {
this.left = this.clientWidth - this.itemWidth / 2
} else {
this.left = -this.itemWidth / 2
}
},
handleScrollEnd() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop === this.currentTop) {
if (this.left > this.clientWidth / 2) {
this.left = this.clientWidth - this.itemWidth - this.gapWidth
} else {
this.left = this.gapWidth
}
clearTimeout(this.timer)
}
},
},
mounted() {
mySelf = this;
this.$nextTick(() => {
let floatButton = document.getElementById("btnHome");
console.log('floatButton--->',floatButton);
if (floatButton){
floatButton.addEventListener("touchstart", () => {
floatButton.style.transition = 'none'
mySelf.opacity = 1
});
// 在拖拽的过程中，组件应该跟随手指的移动而移动。
floatButton.addEventListener("touchmove", (e) => {
// console.log('移动中', e)
if (e.targetTouches.length === 1) { // 一根手指
stop();//禁止页面滑动
let touch = e.targetTouches[0]
// this.left = touch.clientX - 20
let maxX = this.clientWidth - touch.clientX;
if (maxX <= 50) {
this.left = this.clientWidth - 50;//禁止超出屏幕外
}else {
this.left = touch.clientX - this.gapWidth;
}
// this.left = touch.clientX - this.gapWidth;//原来的
if (this.left <=0) this.left = 0
let maxY = this.clientHeight - touch.clientY;
if (maxY <= 50) {
this.top = this.clientHeight - 75;//禁止超出屏幕外
}else {
this.top = touch.clientY - 25//原来的
}
if (this.top <=0) this.top = 0
}
});
// 拖拽结束以后，重新调整组件的位置并重新设置过度动画。
floatButton.addEventListener("touchend", () => {
floatButton.style.transition = 'all 0.3s'
console.log('拖拽结束后left', this.left,'clientHeight-->',this.clientHeight)
//3秒后变透明
setTimeout(()=>{
mySelf.opacity = 0.5
},3000);
move();//解除页面禁止滑动
if (this.left > document.documentElement.clientWidth / 2) {
// this.left = document.documentElement.clientWidth - this.itemWidth - 20;
this.left = document.documentElement.clientWidth - this.itemWidth - this.gapWidth;
} else {
this.left = 0
}
});
}
})
},
beforeDestroy() {
// 添加监听页面滚动
window.removeEventListener('scroll', this.handleScrollStart)
},
destroyed() {
}
}
</script>
<style lang="scss" scoped>
.float_button {
.float_info {
box-shadow: #1666ca;
transition: all 0.3s;
position: fixed;
bottom: 436px;
right: 0;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
z-index: 999;
border-radius: 12px;
cursor: pointer;
background: rgb(146, 146, 146);
width: 54px !important;
height: 54px !important;
opacity: 0.5;
.text {
font-size: 12px;
color: #fff;
}
}
}
</style>
import FloatingButton from '@/components/floatingButton.vue';
Vue.component('FloatingButton', FloatingButton)
<FloatingButton />
<html>
<style>
#float_info {
box-shadow: #1666ca;
transition: all 0.3s;
position: fixed;
bottom: 436px;
right: 0;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
z-index: 999;
border-radius: 12px;
cursor: pointer;
background: rgb(146, 146, 146);
width: 54px !important;
height: 54px !important;
opacity: 0.5;
}
.text-home{
color: #ffffff;
font-size: 14px;
}
</style>
<div id="homeBtn">
<div id="float_info">
<div class="text">
<div style="width: 22px;height: 22px;color: white; position: relative; left: 3px;">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024">
<path fill="currentColor"
d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z">
</path>
</svg>
</div>
<div class="text-home">首页</div>
</div>
</div>
</div>
</html>
<script>
let w = '54px';
let h = '54px';
let gapWidth = 5;
let itemWidth = 54;
let clientWidth = document.documentElement.clientWidth // 获取手机的像素宽度
let clientHeight = document.documentElement.clientHeight// 获取手机的像素高度
let div = document.getElementById('float_info');
// let div = document.createElement('div');
// div.style.opacity = 0.5 ;
// // div.style.boxShadow = '0px 0px 0px 0.5em #e0e1e9' ;
// div.style.width = w;
// div.style.height = h;
// // div.style.left = clientWidth - 50+'px';
// div.style.left = clientWidth - itemWidth - gapWidth+'px';
// console.log("初始位置left"+div.style.left)
// div.style.top = clientHeight * 0.6+'px';
// // div.style.zIndex = '100000';
// // div.style.position= 'fixed';
// // div.style.background = 'red';
//
// div.style.transition='all 0.3s';
// // div.style.bottom='436px';
// // div.style.right= 0;
// // div.style.margin='5px 10px';
// // div.style.background='rgb(197 203 211)'
// // div.style.borderRadius = '15px';
// document.body.appendChild(div);
// var divattr = document.createAttribute("id");
// divattr.value = "float_info";
// //把属性id = "float_info"添加到div
// div.setAttributeNode(divattr);
let flag = 0; //标记是拖曳还是点击
var oDiv = document.getElementById('float_info');
div.style.left = clientWidth - itemWidth - gapWidth +'px';
// oDiv.style.display = 'block'; // 显示元素
oDiv.addEventListener("touchstart", () => {
flag = 0;
oDiv.style.transition = 'none'
div.style.opacity = 1;
})
// 在拖拽的过程中，按钮应该跟随鼠标的移动而移动。
oDiv.addEventListener("touchmove", (e) => {
flag=1
console.log('移动中', e)
if (e.targetTouches.length === 1) { // 一根手指
e.preventDefault();// 阻止默认的滚动行为
let touch = e.targetTouches[0];
// div.style.left = e.targetTouches[0].clientX-20 +'px';//clientX：触摸目标在视口中的x坐标。
let maxX = clientWidth - touch.clientX;
if (maxX <= 50) {
div.style.left = clientWidth - 50 +'px';//禁止超出屏幕外
}else {
div.style.left = touch.clientX - gapWidth +'px';
if (touch.clientX <= 5){
div.style.left = 0+'px'
}
}
console.log('移动中-->clientWidth-->',clientWidth,
'clientX-->',touch.clientX,'maxX-->',maxX )
let maxY = clientHeight - touch.clientY;
if (maxY <= 50) {
div.style.top = clientHeight - 75 +'px';//禁止超出屏幕外
}else {
div.style.top = touch.clientY - 25 +'px'//原来的
}
let phrases = div.style.top.split("px"); // 使用逗号作为分隔符
// console.log('移动中',
// div.style.left,'clientHeight-->',clientHeight,
// 'clientY-->',touch.clientY,
// 'div.style.top-->',div.style.top,'phrases-->',phrases)
if (Number(phrases[0]) <=0) div.style.top = 0+'px'
// div.style.top = e.targetTouches[0].clientY -25 +'px'//clientY：触摸目标在视口中的y坐标。
div.style.opacity = 1;
}
})
// 拖拽结束以后，重新调整按钮的位置并重新设置过度动画。
oDiv.addEventListener("touchend", () => {
// 如果是点击跳转到首页
if(flag==0){
console.log('点击了按钮--->',1111)
}else {
div.style.transition = 'all 0.3s'
console.log('拖拽结束后left', div.style.left)
console.log('拖拽结束后top', div.style.top)
setTimeout(()=>{
div.style.opacity = 0.5;
},3000);
if ( parseInt(div.style.left)> (document.documentElement.clientWidth / 2)) {
// div.style.left = document.documentElement.clientWidth - 50+'px';
div.style.left = document.documentElement.clientWidth - itemWidth - gapWidth +'px';
} else {
div.style.left = 0+'px'
}
// 控制其超出屏幕回到原始位置
if ( parseInt(div.style.top)> (document.documentElement.clientHeight)|| parseInt(div.style.top)<0) {
div.style.top = document.documentElement.clientHeight* 0.6+'px'
}
}
})
</script>
