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


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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP精确计算功能示例
2016/11/29 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python连接池实现示例程序
2013/11/26 Python
python实现问号表达式(?)的方法
2013/11/27 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python数据封装json格式数据
2018/03/04 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
你对IPv6了解程度
2016/02/09 面试题
某公司部分笔试题
2013/11/05 面试题
小溪流的歌教学反思
2014/02/13 职场文书
元旦晚会策划方案
2014/02/18 职场文书
《穷人》教学反思
2014/04/08 职场文书
股东协议书
2014/04/14 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript