在制作商城類微信小程序的過程中，我們經(jīng)常會碰到需要增加可拖動懸浮圖標(biāo)的情況，本文簡單的介紹一下可拖動懸浮按鈕的實(shí)現(xiàn)。
運(yùn)行截圖：
主要代碼：
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: { //按鈕位置參數(shù) buttonTop: 0, buttonLeft: 0, windowHeight: '', windowWidth: '', //角標(biāo)顯示數(shù)字 corner_data:0, }, onLoad:function(){ //定義角標(biāo)數(shù)字 this.setData({ corner_data:3 }) // 獲取購物車控件適配參數(shù) 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,//這里定義按鈕的初始位置 }) } }) }, //可拖動懸浮按鈕點(diǎn)擊事件 btn_Suspension_click:function(){ //這里是點(diǎn)擊購物車之后將要執(zhí)行的操作 wx.showToast({ title: '點(diǎn)擊成功', icon:'success', duration:1000 }) }, //以下是按鈕拖動事件 buttonStart: function (e) { startPoint = e.touches[0]//獲取拖動開始點(diǎn) }, buttonMove: function (e) { var endPoint = e.touches[e.touches.length - 1]//獲取拖動結(jié)束點(diǎn) //計算在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事件，否則按鈕點(diǎn)擊事件會失效--><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><!--這里是按鈕圖標(biāo)，下載地址會在文章底部說明--> <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;} |
圖標(biāo)素材下載地址：
Iconfont阿里巴巴矢量圖標(biāo)庫：https://www.iconfont.cn/
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))的文章就介紹到這了,更多相關(guān)小程序?qū)崿F(xiàn)懸浮圖標(biāo)內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/botellei/article/details/111826124
