无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

小程序发布流程_微信小程序完成手势滑动效果

时间:2021-01-07 11:50来源:小程序发布流程 作者:jianzhan 点击:
手机微信微信小程序完成手式拖动实际效果 本文关键为大伙儿详尽详细介绍了手机微信微信小程序完成手式拖动实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照
微信小程序实现手势滑动效果       这篇文章主要为大家详细介绍了微信小程序实现手势滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下

wxml:

 view 
bindtouchstart="touchStart" 
bindtouchmove="touchMove" 
bindtouchend="touchEnd" 
 /view 

index.js:

var touchStartX = 0;//触摸时的原点 
var touchStartY = 0;//触摸时的原点 
var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动 
var interval = "";// 记录/清理时间记录 
var touchMoveX = 0; // x轴方向移动的距离
var touchMoveY = 0; // y轴方向移动的距离
Page({
// 触摸开始事件 
 touchStart: function (e) {
 touchStartX = e.touches[0].pageX; // 获取触摸时的原点 
 touchStartY = e.touches[0].pageY; // 获取触摸时的原点 
 // 使用js计时器记录时间 
 interval = setInterval(function () {
 time++;
 }, 100);
 // 触摸移动事件 
 touchMove: function (e) {
 touchMoveX = e.touches[0].pageX;
 touchMoveY = e.touches[0].pageY;
 // 触摸结束事件 
 touchEnd: function (e) {
 var moveX = touchMoveX - touchStartX
 var moveY = touchMoveY - touchStartY
 if (Math.sign(moveX) == -1) {
 moveX = moveX * -1
 if (Math.sign(moveY) == -1) {
 moveY = moveY * -1
 if (moveX = moveY) {// 上下
 // 向上滑动
 if (touchMoveY - touchStartY = -30 time 10) {
 console.log("向上滑动")
 // 向下滑动 
 if (touchMoveY - touchStartY = 30 time 10) {
 console.log('向下滑动 ');
 }else {// 左右
 // 向左滑动
 if (touchMoveX - touchStartX = -30 time 10) {
 console.log("左滑页面")
 // 向右滑动 
 if (touchMoveX - touchStartX = 30 time 10) {
 console.log('向右滑动');
 clearInterval(interval); // 清除setInterval 
 time = 0;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信