【微信小程序实现悬浮框可拖动】

最新推荐文章于 2024-08-22 01:28:37 发布

梨童就是小梨童呀

最新推荐文章于 2024-08-22 01:28:37 发布

阅读量1.8k

点赞数 1

分类专栏： vue css 文章标签：微信小程序小程序

原文链接：https://blog.51cto.com/phyger/5202559

版权

vue 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中实现小图标的悬浮拖动功能，通过JavaScript和WXML实现按钮的点击及拖动事件，允许用户在屏幕上自由调整图标位置，增强了页面的交互性和设计灵活性。同时，提供了代码示例和图标素材的下载链接。

摘要由CSDN通过智能技术生成

微信小程序实现小图标悬浮拖动移动
在电商平台常见的开发中，或多或少的设计图中都会牵扯到小图标悬浮的设计，当图标可以移动时，可增加页面的设计排版灵活性，下面贴出效果图

在这里插入图片描述

var startPoint
Page({
  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

<!--可拖动按钮控件表-->
<!--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

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/