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


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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
继续学习javascript闭包
Dec 03 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Vue组件通信的几种实现方法
2019/04/25 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python控制台中实现进度条功能
2015/11/10 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
关于Java String的一道面试题
2013/09/29 面试题
体育专业个人求职信范文
2013/12/27 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
大专生求职信
2014/06/29 职场文书
战略合作意向书
2014/07/29 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL