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


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 相关文章推荐
TypeScript Type Innference(类型判断)
Mar 10 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JS中的作用域链
Mar 01 Javascript
页面点击小红心js实现代码
May 26 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
详解React的回调渲染模式
Sep 10 Javascript
深入理解javascript中的this
Feb 08 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计数器的实现代码
2013/06/08 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
在Python中处理XML的教程
2015/04/29 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
中国文明网签名寄语
2014/01/18 职场文书
护士自我评价
2014/02/01 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014年统战工作总结
2014/12/09 职场文书
迟到检讨书范文
2015/01/27 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Python编写nmap扫描工具
2021/07/21 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript