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


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常用代码段收集
Oct 28 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 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
一个改进的UBB类
2006/10/09 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
浅析javascript闭包 实例分析
2010/12/25 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
Python扩展内置类型详解
2018/03/26 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python文件操作方法详解
2020/02/09 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
python 获取计算机的网卡信息
2021/02/18 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
关于人生的感言
2014/01/17 职场文书
便利店促销方案
2014/02/20 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
艺术教育实施方案
2014/05/03 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
经营目标管理责任书
2014/07/25 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
领导新年致辞2016
2015/07/29 职场文书
安全生产会议制度
2015/08/06 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书