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


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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
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
动易数据转成dedecms的php程序
2007/04/07 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
详解js类型判断
2018/05/22 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python动态性强类型用法实例
2015/05/09 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
flask项目集成swagger的方法
2020/12/09 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
文科毕业生自荐书范文
2014/04/17 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
土地转让协议书
2014/09/27 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书