快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))

更新時(shí)間：2020年12月29日 08:43:12 作者：юноша

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn)),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在制作商城類微信小程序的過程中，我們經(jīng)常會(huì)碰到需要增加可拖動(dòng)懸浮圖標(biāo)的情況，本文簡單的介紹一下可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)。

運(yùn)行截圖：

在這里插入圖片描述

主要代碼：

js:

var startPoint
Page({
 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,//這里定義按鈕的初始位置
  })
  }
 })
 },
 //可拖動(dòng)懸浮按鈕點(diǎn)擊事件
 btn_Suspension_click:function(){
 //這里是點(diǎn)擊購物車之后將要執(zhí)行的操作
 wx.showToast({
  title: '點(diǎn)擊成功',
  icon:'success',
  duration:1000
 })
 },
 //以下是按鈕拖動(dòng)事件
 buttonStart: function (e) {
 startPoint = e.touches[0]//獲取拖動(dòng)開始點(diǎn)
 },
 buttonMove: function (e) {
 var endPoint = e.touches[e.touches.length - 1]//獲取拖動(dòng)結(jié)束點(diǎn)
 //計(jì)算在X軸上拖動(dòng)的距離和在Y軸上拖動(dòng)的距離
 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
 //判斷是移動(dòng)否超出屏幕
 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:

<!--可拖動(dòng)按鈕控件表-->
<!--buttonStart和buttonEnd一定不能用catch事件，否則按鈕點(diǎn)擊事件會(huì)失效-->
<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)，下載地址會(huì)在文章底部說明-->
 <view wx:if="{{corner_data==0}}"></view>
 <view wx:else>
  <view class="cornorMark">
  <text>{{corner_data}}</text>
  </view>
 </view>
 </view>

wxss：

Page{
 background: #f5f5f5;
}
/**可拖動(dòng)懸浮按鈕樣式表**/
.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)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))的文章就介紹到這了,更多相關(guān)小程序?qū)崿F(xiàn)懸浮圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: