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


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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
一起深入理解js中的事件对象
Feb 06 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
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
马智宇结婚主持词
2014/04/01 职场文书
初婚未育证明样本
2014/10/24 职场文书
孝女彩金观后感
2015/06/10 职场文书
个人催款函范文
2015/06/24 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
JavaScript实现登录窗体
2021/06/22 Javascript
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript