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


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 相关文章推荐
DOM精简教程
Oct 03 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue a标签点击实现赋值方式
Sep 07 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
linux命令之调试工具strace的深入分析
2013/06/03 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
Django如何自定义分页
2018/09/25 Python
详解python 爬取12306验证码
2019/05/10 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
法律专业自我鉴定
2013/10/03 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
社区禁毒工作方案
2014/06/02 职场文书
施工工地安全标语
2014/06/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
创先争优承诺书
2015/01/20 职场文书
区域经理岗位职责
2015/02/02 职场文书
入党自传范文2015
2015/06/26 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis