微信小程序手势操作之单触摸点与多触摸点

2024-11-30 10:45:31

前言

手势对于一些效果是比较重要的，在canvas、交互等中应用非常广，看一下微信小程序手势是如何的。

Demo

为了研究小程序是否支持多手指，需要使用touchstart,touchmove,touchend

// index.wxml
<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" >
</view>

//index.js
touchstartFn: function(event){
  console.log(event);
 },
 touchmoveFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 },
 touchendFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 }

单触摸点，多触摸点

官方文档:changedTouches

changedTouches 数据格式同 touches。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

"changedTouches":[{
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]

真机效果

实现以上Demo后模拟器是无法看到多触摸点的数据的，所以你需要真机来测试。

看下真机的log信息

在changedTouches中按顺序保存触摸点的数据，所以小程序本身支持多触摸点的手势

结论

设想: 既然小程序的手势是支持多触摸，而且可以获取到相关的路径，那么相关路径计算也是可行的。

场景: 多触摸交互效果，手指绘制等

触摸点数据保存

为了能够来分析触摸点的路径，最起码是简单的手势，如左滑、右滑、上滑、下滑，我们需要保存起路径的所有数据。

触摸事件

触摸触发事件分为"touchstart", "touchmove", "touchend","touchcancel"四个

详见:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20

存储数据

var _wxChanges = [];
var _wxGestureDone = false;
const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];
// 收集路径
function g(e){
  if(e.type === "touchstart"){
    _wxChanges = [];
    _wxGestureDone = false;
  }
  if(!_wxGestureDone){
    _wxChanges.push(e);
    if(e.type === "touchend"){
      _wxGestureDone = true;
    }else if(e.type === "touchcancel"){
      _wxChanges = [];
      _wxGestureDone = true;
    }
  }
}

结尾

这篇文章，主要探索一下，希望你也可以提前看一下手势的解析。

微信小程序下拉列表的实现实例代码

微信小程序下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r
微信小程序遇到修改数据后页面不渲染的问题解决

微信小程序遇到修改数据后页面不渲染的问题解决前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,
微信小程序开发之入门实例教程篇

前言近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试.本文就以"我的第一个微信小程序"为例,简单的介绍下,微信小程序的入门级用法. 一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置". 3.会获得一个AppID,记录AppID,后面创建项
微信小程序合法域名校验出错详解及解决办法

微信小程序合法域名校验出错详解及解决办法看下出现错误: 微信小程序开发,遇到这个问题怎么办? 产生原因是因为发起了wx.request请求而请求的域名没有在微信公众平台后台设置. 1.开发者自己手动设置不检验不管你有没有拿到App ID ,我相信很多人都会和我一样做一件事,就是二话不说先大概了解下文档,然后直接上github找项目,导入试试.我是这么做的,结果上来就报这个错,后来发现其实可以自己设置本地开发工具不校验域名,完全没有影响. 在"项目">最后一个选项,勾选之后
微信小程序弹框和模态框实现代码

微信小程序弹框和模态框实现代码实现效果图: 实现代码: <view class="wxapp-modal" style="{{modal_style}}"> <view class="content"> </view> <view class="mask" bindtap="closeModal"></view> </view> /
微信小程序图片加载（本地，网路）实例详解

在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片加载网络图片加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.
微信小程序中用WebStorm使用LESS

前提自己前端不熟悉,很多都需要练习网上找了一个css的demo, 放到微信小程序后,可以运行图片很大,没有弄,加载可能有点慢(不相关的,就不扯了) Less环境 Less需要nodejs的npm nodejs的环境这里略了自己百度通过 npm install less -g 安装好 less (没有用过的,可以理解为 maven的库, gradle库,pods的库) WebStorm的Less使用先关联对应的less 当然,对应的wxss文件,在webstorm中的显示, 可以参考自
微信小程序页面传值详解

微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可如果要传数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能
微信小程序手势操作之单触摸点与多触摸点

前言手势对于一些效果是比较重要的,在canvas.交互等中应用非常广,看一下微信小程序手势是如何的. Demo 为了研究小程序是否支持多手指,需要使用touchstart,touchmove,touchend // index.wxml <view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="to
微信小程序实现form表单本地储存数据

本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加. login.wxml代码:  <view class='container'> <form bindsubmit='submit'
微信小程序开发之表单验证WxValidate使用

微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证. WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单. 首先插件的下载地址和官方文档都在WxValidat
微信小程序中form 表单提交和取值实例详解

微信小程序中form 表单提交和取值实例详解我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange
微信小程序使用form表单获取输入框数据的实例代码

本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng
微信小程序dom操作的替代思路实例分析

本文实例讲述了微信小程序dom操作的替代思路.分享给大家供大家参考,具体如下: 微信小程序无法操作dom,这意味着之前js中的各种习惯方法必须换一种思路实现在尝试了几类情况后,发现部分情况下可以用{{}}变量绑定来实现效果. 比如: 一.实现view的显示和隐藏在js中的data设置变量 bottomHidden1:"block": 然后在wxml中的view中设置<view class="bottom1" style="display:{{bo
微信小程序实现手势图案锁屏功能

本文实例为大家分享了微信小程序手势图案锁屏的具体代码,供大家参考,具体内容如下参考 H5lock 效果图 WXML <view class="container"> <view class="reset" bindtap="resetPwd">重置密码</view> <view class="title">{{title}}</view> <canvas ca
微信小程序实现手势解锁的示例详解

目录一.项目展示二.设置手势.手势解锁三.手势重置一.项目展示这是一款简单实用的手势解锁工具手势解锁是当下常用的解锁方式本实例以工具的形式可以嵌入到不同的项目之中二.设置手势.手势解锁 wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理 if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态 if (this.checkPass(this.p
微信小程序实现换肤功能

pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所以实现的方式有点不一样,大致如下: 1.需要换肤的wxss,正常的wxss. 2.每个页面都引入换肤的wxss(因为换肤每个页面都需要改变). 3.在app.js的globalData里设置默认的皮肤类型. 4.每个页面onload的时候,读取storage里的数据并设置当前皮肤类型的值. 例子:
操作按钮悬浮固定在微信小程序底部的实现代码

本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助. 常见的有加入购物车按钮.结算按钮.收货列表添加地址按钮. 以收货地址为例,将添加地址按钮悬浮于最底部,这样再多的地址,也不会被遮挡而看不见. 核心代码如下: 添加 /*添加地址按钮*/ .address-add { position: fixed; bottom: 0; width: 100%; } 改用position: fixed之后,其中width需要设置为

微信小程序手势操作之单触摸点与多触摸点

相关推荐

随机推荐