在制作商城類微信小程序的過程中，我們經常會碰到需要增加可拖動懸浮圖標的情況，本文簡單的介紹一下可拖動懸浮按鈕的實現。
運行截圖：
主要代碼：
js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
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); // 高度,寬度 單位為px that.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.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) { }}) |
wxml:
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--可拖動按鈕控件表--><!--buttonStart和buttonEnd一定不能用catch事件，否則按鈕點擊事件會失效--><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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
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;} |
圖標素材下載地址：
Iconfont阿里巴巴矢量圖標庫：https://www.iconfont.cn/
到此這篇關于微信小程序實現可拖動懸浮圖標(包括按鈕角標的實現)的文章就介紹到這了,更多相關小程序實現懸浮圖標內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/botellei/article/details/111826124
