一,可拖动的悬浮按钮的视频演示
可移动悬浮按钮
二,主要代码
1.html代码
<movable-area class="move-area">
<movable-view class="move-button" :x="area.x" :y="area.y" direction="all" @change="onChange" damping="30" >
<image src="../../static/logo.png" style="width: 100%; border-radius: 50%;" mode="widthFix"></image>
</movable-view>
</movable-area>
2.js代码(设置x和y的初始值)
const area = ref({
x:0,
y:340
});
// 实现只悬浮于屏幕两边
const onChange = (e) => {
area.value.y = e.detail.y
uni.getSystemInfo({ //获取屏幕信息 宽度
success: (res) => {
if ( e.detail.x > Number(res.windowWidth / 2) ) {
area.value.x = Number(res.windowWidth);
}else {
area.value.x = 0
}
},
});
}
3.css样式代码
.move-area {
position: fixed; //固定定位,使其在整个屏幕内移动
height: 100%;
width: 100%;
.move-button {
display: flex;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
pointer-events: auto;
border-radius: 50%;
}
}
uni-app官网查看更多设置:movable-view | uni-app官网 (dcloud.net.cn)