快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(biāo)的示例代碼

更新時間：2023年12月25日 15:52:51 作者：雪芽藍域zzs

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

效果圖

在這里插入圖片描述

（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

var startPoint
Page({
  data: {
    //按鈕位置參數(shù)
    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] //獲取拖動結(jié)束點
    //計算在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

@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;
 }

到此這篇關(guān)于微信小程序實現(xiàn)可拖動懸浮圖標(biāo)的文章就介紹到這了,更多相關(guān)微信小程序懸浮圖標(biāo) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: