1500字范文 > 微信小程序：实现可拖动悬浮图标（包括按钮角标的实现）

微信小程序：实现可拖动悬浮图标（包括按钮角标的实现）

时间：2022-04-14 19:54:32

微信小程序：实现可拖动悬浮图标

在制作商城类微信小程序的过程中，我们经常会碰到需要增加可拖动悬浮图标的情况，本文简单的介绍一下可拖动悬浮按钮的实现。

运行截图：

主要代码：

js:

var startPointPage({data: {//按钮位置参数buttonTop: 0,buttonLeft: 0,windowHeight: '',windowWidth: '',//角标显示数字corner_data:0,},onLoad:function(){//定义角标数字this.setData({corner_data:3})// 获取购物车控件适配参数var that =this;wx.getSystemInfo({success: function (res) {console.log(res);// 屏幕宽度、高度console.log('height=' + res.windowHeight);console.log('width=' + res.windowWidth);// 高度,宽度单位为pxthat.setData({windowHeight: res.windowHeight,windowWidth: res.windowWidth,buttonTop:res.windowHeight*0.70,//这里定义按钮的初始位置buttonLeft:res.windowWidth*0.70,//这里定义按钮的初始位置})}})},//可拖动悬浮按钮点击事件btn_Suspension_click:function(){//这里是点击购物车之后将要执行的操作wx.showToast({title: '点击成功',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.clientXvar translateY = endPoint.clientY - startPoint.clientYstartPoint = endPoint//重置开始位置var buttonTop = this.data.buttonTop + translateYvar 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) {}})

wxml:

<view class="btn_Suspension" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"><image class="Suspension_logo" src="../images/Suspension.png"></image><view wx:if="{{corner_data==0}}"></view><view wx:else><view class="cornorMark"><text>{{corner_data}}</text></view></view></view>

wxss：

Page{background: #f5f5f5;}/**可拖动悬浮按钮样式表**/.btn_Suspension{position: fixed;height: 100rpx;width: 100rpx;background-color: rgba(255, 255, 255, 0.755);border-radius: 100%;display: flex;align-items: center;justify-content: center;z-index: 99999;box-shadow: 1px 0px 1px 1px #ede7e7;}.Suspension_logo{position:absolute;height:50%;width:50%;left:23%;top:27%}.cornorMark{position:absolute;background: rgb(242, 109, 38);border:1px solid rgb(242, 109, 38);border-radius: 100px;width:30rpx;height:30rpx;top:-17rpx;right:3rpx;color:#fff;font-size: 12px;text-align: center;}.cornorMark text{position:absolute;width:100%;left:0%;text-align: center;top:-1px;}

图标素材下载地址：