<template>
<view class="demo">
<status-bar title="测试页面"></status-bar>
<movable-area class="movableArea">
<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
:damping="damping" @change="onChange" @touchend="onTouchend">
<image src="../../static/img/shou.gif" mode="widthFix" class="iconImage" @click="iconClick"></image>
<!-- <button open-type='contact' session-from='' class="contact">联系客服</button> -->
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
description: "测试页面",
x: 0,
y: 0,
x1: 0,
x2: 0,
y1: 0,
y2: 0,
move: {
x: 0,
y: 0
}
}
},
// 侦听器
watch: {
},
// 计算属性
computed: {
},
//组件创建
created() {
},
// 页面加载
onLoad(e) {
},
// 页面显示
onShow() {
},
props: {
damping: {
type: Number,
default: 10
},
direction: {
type: String,
default: "all"
},
position: {
type: Number,
default: 4
},
},
mounted() {
uni.getSystemInfo({
success: (res) => {
this.x1 = 0;
this.x2 = parseInt(res.windowWidth) - 50;
this.y1 = 0;
this.y2 = parseInt(res.windowHeight) - 20;
setTimeout(() => {
if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
this.move.x = this.x;
this.move.y = this.y;
}, 1000)
}
})
},
// 方法
methods: {
onChange(e) {
if (e.detail.source === "touch") {
this.move.x = e.detail.x;
this.move.y = e.detail.y;
}
},
onTouchend() {
this.x = this.move.x;
this.y = this.move.y;
setTimeout(() => {
if (this.move.x < this.x2 / 2) this.x = this.x1;
else this.x = this.x2;
console.log(this.x, this.y)
}, 100)
},
// 点击按钮跳转
iconClick() {
console.log('点击跳转');
},
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
},
// 页面上拉触底事件的处理函数
onReachBottom() {
},
}
</script>
<style lang="scss" scoped>
.demo {
height: 100vh;
overflow: auto;
background-color: #fcfcfc;
.movableArea {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
z-index: 999;
.movableView {
pointer-events: auto; //可以点击
width: 120rpx;
height: 120rpx;
padding: 10rpx;
border-radius: 100%;
border: 2px solid #f8931f;
.iconImage {
display: block;
width: 120rpx;
height: 120rpx;
// animation: iconImage 5s linear infinite; //进行旋转
}
@keyframes iconImage {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
// 客服
.contact {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
border-radius: 100%;
opacity: 0;
}
}
}
}
</style>
案例二、
<template>
<movable-area class="movable-area">
<movable-view class="movable-view" :x="x" :y="y" direction="all">
<view class="float-btn">悬浮</view>
</movable-view>
</movable-area>
</template>
<script>
export default {
data() {
return {
// x: 280,
// y: 700,
x: 0,
y: 0,
screenWidth: 0,
screenHeight: 0
}
},
// 页面加载
onLoad(e) {
const res = uni.getSystemInfoSync()
this.screenWidth = res.windowWidth;
this.screenHeight = res.windowHeight;
this.x = this.screenWidth - 100;
this.y = this.screenHeight - 150;
console.log(this.screenWidth, this.screenHeight);
console.log(this.x, 'this.x');
console.log(this.y, 'this.y');
},
// 页面显示
onShow() {
},
}
</script>
<style scoped lang="less">
page {
width: 100vw;
height: 100%;
}
.movable-area {
// 可移动的范围
height: 100vh;
width: 750rpx;
top: 0;
position: fixed;
pointer-events: none; //鼠标事件可以渗透
}
.movable-view {
width: 140rpx; // 按钮大小
height: 140rpx;
pointer-events: auto; //恢复鼠标事件
}
.float-btn {
width: 140rpx;
height: 140rpx;
line-height: 140rpx;
text-align: center;
background: #e0241b;
box-shadow: 0 3rpx 6rpx 1rpx rgba(224, 36, 27, .3);
border-radius: 50%;
position: fixed;
}
</style>