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


Posted in Javascript onDecember 29, 2020

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

运行截图:

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

主要代码:

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/

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

Javascript 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
js继承的实现代码
Aug 05 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
Javascript window对象详解
Nov 12 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
node.js操作MongoDB的实例详解
Oct 11 Javascript
node使用request请求的方法
Dec 20 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue中配置scss全局变量的步骤
Dec 28 #Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
node.js通过Sequelize 连接MySQL的方法
Dec 28 #Javascript
解决elementui表格操作列自适应列宽
Dec 28 #Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 #Javascript
React实现todolist功能
Dec 28 #Javascript
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
JS原型链怎么理解
2016/06/27 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
检讨书范文
2015/01/27 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis