本站消息
小程序实现可拖动的悬浮图标
发布于2021-03-07 22:15 阅读(839) 评论(0) 点赞(30) 收藏(2)
小程序实现可拖动的悬浮图标
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
})
}
})
},
原文链接:https://blog.csdn.net/hu104160112/article/details/114393770
所属网站分类: 技术文章 > 博客
作者：代码搬运工
链接：http://www.qianduanheidong.com/blog/article/33507/45a53077b5751bba8f94/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
30
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)