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


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 相关文章推荐
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
javascript数据类型详解
Feb 07 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
使用Python 统计高频字数的方法
2019/01/31 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python中的django是做什么的
2020/07/31 Python
英国电子专家:maplin
2019/09/04 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
体育教学随笔感言
2014/02/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
督导岗位职责
2015/02/04 职场文书
图神经网络GNN算法
2022/05/11 Python