效果图
(1)wxml
<view class="float-layout" bindtap="floatClick" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
<image class='float-img' src="../icon_service.png" mode="scaleToFill" />
<view class="float-txt" >问题反馈</view>
</view>
(2)js文章来源:https://www.toymoban.com/news/detail-764592.html
var startPoint
Page({
data: {
//按钮位置参数
buttonTop: 0,
buttonLeft: 0,
windowHeight: '',
windowWidth: '',
},
onLoad(options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
// 高度,宽度 单位为px
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth,
buttonTop: res.windowHeight * 0.50, //这里定义按钮的初始位置
buttonLeft: res.windowWidth * 0.75, //这里定义按钮的初始位置
})
}
})
},
/**
* 可拖动悬浮按钮点击事件
*/
floatClick: function () {
wx.showToast({
title: 'd点击了',
icon: 'success',
duration: 1000
})
},
//以下是按钮拖动事件
buttonStart: function (e) {
startPoint = e.touches[0] //获取拖动开始点
},
buttonMove: function (e) {
var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
//计算在X轴上拖动的距离和在Y轴上拖动的距离
var translateX = endPoint.clientX - startPoint.clientX
var translateY = endPoint.clientY - startPoint.clientY
startPoint = endPoint //重置开始位置
var buttonTop = this.data.buttonTop + translateY
var buttonLeft = this.data.buttonLeft + translateX
//判断是移动否超出屏幕
if (buttonLeft + 50 >= this.data.windowWidth) {
buttonLeft = this.data.windowWidth - 50;
}
if (buttonLeft <= 0) {
buttonLeft = 0;
}
if (buttonTop <= 0) {
buttonTop = 0
}
if (buttonTop + 50 >= this.data.windowHeight) {
buttonTop = this.data.windowHeight - 50;
}
this.setData({
buttonTop: buttonTop,
buttonLeft: buttonLeft
})
},
buttonEnd: function (e) {}
})
(3)wxss文章来源地址https://www.toymoban.com/news/detail-764592.html
@import "../../public/wxss/base.wxss";
/**可拖动悬浮按钮样式表**/
.float-layout{
position: fixed;
padding: 15rpx 30rpx;
background-color: rgba(255, 255, 255, 0.755);
border-radius: 30%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
box-shadow: 1px 1px 1px 1px #ede7e7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.float-img{
width: 75rpx;
height: 75rpx;
}
.float-txt{
left:23%;
top:27%;
font-weight: 800;
font-size: 32rpx;
color: #3691FB;
}
到了这里,关于微信小程序 实现可拖动悬浮图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!