当前位置: 首页 > 编程笔记 >

微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

连昊天
2023-03-14
本文向大家介绍微信小程序实现可拖动悬浮图标(包括按钮角标的实现),包括了微信小程序实现可拖动悬浮图标(包括按钮角标的实现)的使用技巧和注意事项,需要的朋友参考一下

在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现。

运行截图:

主要代码:

js:

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/

到此这篇关于微信小程序实现可拖动悬浮图标(包括按钮角标的实现)的文章就介绍到这了,更多相关小程序实现悬浮图标内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍vue悬浮可拖拽悬浮按钮的实例代码,包括了vue悬浮可拖拽悬浮按钮的实例代码的使用技巧和注意事项,需要的朋友参考一下 前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后

  • 本文向大家介绍操作按钮悬浮固定在微信小程序底部的实现代码,包括了操作按钮悬浮固定在微信小程序底部的实现代码的使用技巧和注意事项,需要的朋友参考一下 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助。   常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。   以收货地址为例,将添加地址按钮悬浮于最底部,这样再多

  • 本文向大家介绍微信小程序 按钮滑动的实现方法,包括了微信小程序 按钮滑动的实现方法的使用技巧和注意事项,需要的朋友参考一下 微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml index.wxss index.js 三.顺便说说 1.按钮滑动事件 bindtouchstart //按钮开始滑动 bindtouchend //按钮结束滑动 bindtou

  • 本文向大家介绍微信小程序中悬浮窗功能的实现代码,包括了微信小程序中悬浮窗功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击。 这算是一个比较常见的实现场景了。 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view。 这是简化的代码结构: 为什么要用co

  • 本文向大家介绍微信小程序按钮点击动画效果的实现,包括了微信小程序按钮点击动画效果的实现的使用技巧和注意事项,需要的朋友参考一下 动画效果如下: GIF看起来可能会有点卡 wxml wxss 总结 以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎

  • 本文向大家介绍微信小程序 导入图标实现过程详解,包括了微信小程序 导入图标实现过程详解的使用技巧和注意事项,需要的朋友参考一下 图片素材库——阿里巴巴矢量图https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1359989” 在页面输入要搜索的图标 点击“入库”,然后“添加至项目” 选择“编辑”,即对进行编辑成