微信小程序实现可长按移动控件


Posted in Javascript onNovember 01, 2020

微信小程序可长按移动控件,供大家参考,具体内容如下

?包含超出边界监测,性能不够理想【原因:setData在毫秒级刷新时会极大程度影响渲染性能】

Javascript

Page({
 /**
 * 页面的初始数据
 */
 data: {
 //浮动按钮坐标
 flow_y: 130,
 flow_x: 20,

 pre_y:0,
 pre_x:0,
 //标记移动
 moveFlag: false,
 //标记控件是否可放置
 canNotPlace: false,
 imgSrc:"",
 },


 //长按按钮移动控件
 longPress: function (e) {
 console.log(e)
 this.setData({
 moveFlag: true,
 pre_x:e.touches[0].clientX,
 pre_y:e.touches[0].clientY,
 })
 // console.log(e)
 console.log("begin:(", this.data.flow_x, this.data.flow_y, ")")
 // this.setData({
 // flow_x: 1334-e.touches[0].pageX, // 获取触摸时的原点
 // flow_y: 750-e.touches[0].pageY,
 // })
 //console.log(startX)

 },

 // 触摸结束事件
 touchEnd: function (e) {
 this.setData({
 moveFlag: false
 })

 // console.log("flow:(", this.data.flow_x, this.data.flow_y, ")")
 //监测按钮放置区域
 if (!((this.data.flow_x < 730) && (this.data.flow_x > 20))&&((this.data.flow_y < 1150) && (this.data.flow_y > 130))) {
 this.setData({
 flow_x: 20, // 转换rpx
 flow_y: 130,
 })
 }
 // this.setData({
 // flow_x: 20, // 转换rpx
 // })
 },

 touchMove: function (e) {
 //根据move差值动态布局
 if (this.data.moveFlag) {
 // console.log("page:(", e.touches[0].pageX, e.touches[0].pageY, ")")
 // console.log(move_x,move_y)

 var x =this.data.flow_x -(e.touches[0].clientX-this.data.pre_x)*2
 var y =this.data.flow_y -(e.touches[0].clientY-this.data.pre_y)*2
 this.setData({
 flow_x: x, // 转换rpx
 flow_y: y,
 })
 // console.log(x,y)
 // this.setData({
 // flow_x: x, // 转换rpx
 // flow_y: y,
 // })
 if (!(((x < 730) && (x > 20))&&((y < 1000) && (y > 130)))) {
 this.setData({
  canNotPlace: true,
 })
 } else {
 this.setData({
  canNotPlace: false,
 })
 }
 this.setData({
 pre_x:e.touches[0].clientX,
 pre_y:e.touches[0].clientY,
 })
 }
 },


 catchtouchmove: function () {
 //防止蒙层触摸穿透
 },



 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 wx.hideLoading()
 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 this.getArticle()
 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

WXSS

.follow_icon{
 position: fixed;
 /* margin: 0 10rpx; */
 width:70rpx;
 height:70rpx;
 bottom: var(--flow_y--);
 right: var(--flow_x--);
 z-index: 1001;
}

/*mask*/
.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 5;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
}

WXML

<!-- 刷新按钮 -->
<!-- <view bindtap='getArticle' style="opacity:0.8"> -->
<view catchtouchmove="catchtouchmove" ><image bindtap='getArticle' bindlongpress="longPress" bindtouchmove='touchMove' bindtouchend="touchEnd" style="--flow_y--:{{flow_y}}rpx;--flow_x--:{{flow_x}}rpx;" class="follow_icon" src="{{imgSrc}}"></image></view>

<!-- 蒙版屏蔽,防止触控穿透 -->
<view style="{{!canNotPlace?'background: #777;':'background: #b81e1e;'}}" catchtouchmove="catchtouchmove" class="drawer_screen" data-statu="open" wx:if="{{moveFlag}}"></view> 
<!-- </view> -->

微信小程序实现可长按移动控件

微信小程序实现可长按移动控件

微信小程序实现可长按移动控件

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript 函数的执行过程
May 09 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
js数组去重的方法总结
Jan 18 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 #Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 #Javascript
vue制作toast组件npm包示例代码
Oct 29 #Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
Python中实现常量(Const)功能
2015/01/28 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python功能键的读取方法
2015/05/28 Python
简单易懂的python环境安装教程
2017/07/13 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python实现k-means聚类算法
2018/02/23 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
js实现弹框效果
2021/03/24 Javascript
应届生法律求职信
2013/10/22 职场文书
校园活动策划书范文
2014/01/10 职场文书
机械个人求职信范文
2014/01/24 职场文书
升旗仪式主持词
2014/03/19 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书