小程序实现可拖动的悬浮图标
wxml
<movable-area class="movablebox" style="height:{{phoneHeight}}px">
<movable-view x="{{x}}" y="{{y}}" direction="all" class='movableview'>
<image mode="widthFix" src='https://sucai.suoluomei.cn/sucai_zs/images/20210305115408-add.png'></image>
</movable-view>
</movable-area>
wxss
.movablebox {
position: fixed;
width: 100%;
}
.movableview {
position: fixed;
width: 100rpx;
z-index: 100;
}
image {
width: 100%;
height: 100%;
}
js
data: {
x: 750, //x轴方向的偏移
y: 750, //y轴方向的偏移
phoneWidth: 0, //设备可用宽度
phoneHeight: 0 //设备可用高度
},
onLoad: function (options) {
this.getPhoneInfo()
},
//获取设备信息
getPhoneInfo() {
wx.getSystemInfo({
success: (res) => {
console.log(res)
this.setData({
phoneWidth: res.windowWidth,
phoneHeight: res.windowHeight,
x: res.windowWidth - 80,
y: res.windowHeight - 200
})
}
})
},