最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

微信小程序实现手势滑动效果

来源:动视网 责编:小OO 时间:2020-11-27 21:51:53
文档

微信小程序实现手势滑动效果

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下:wxml。<;view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >;<;/view>。index.js。
推荐度:
导读本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下:wxml。<;view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >;<;/view>。index.js。


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

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;
 }, 
})

文档

微信小程序实现手势滑动效果

本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下:wxml。<;view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >;<;/view>。index.js。
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top