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


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 相关文章推荐
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
ES6 十大特性简介
Dec 09 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
express.js中间件说明详解
2019/03/19 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
2014年办公室文员工作总结
2014/11/12 职场文书
开平碉楼导游词
2015/02/06 职场文书
收入证明申请书
2015/06/12 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL