小程序-滑动事件

小程序滑动事件

- 在编写代码时,可能会遇到这种需求,页面需要左右滑动 或者 上下滑动 ,但是小程序的上拉加载,下拉刷新却不合适,所以使用🗡

html代码

<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">

-给你所需要的滑动的view 添加事件

滑动事件 JS
在js 顶部

var startY, endY;
var moveFlag = true; // 判断执行滑动事件

滑动事件 JS 处理函数

	touchStart: function(e) {
		startY = e.touches[0].pageY; // 获取触摸时的原点
		moveFlag = true;
	},
	// 触摸移动事件
	touchMove: function(e) {
		endY = e.touches[0].pageY; // 获取触摸时的原点
		if (moveFlag) {
			if (endY - startY > 50) {
				console.log("pullDown")
				moveFlag = false;
			}
			if (startY - endY > 50) {
				console.log("pullup")
				moveFlag = false;
			}
		}
	},
	// 触摸结束事件
	touchEnd: function(e) {
		moveFlag = true; // 回复滑动事件
	},

startY endY 代表 页面Y轴 上下滑动
startX endX 代表 页面X轴 左右滑动

if (endY - startY > 50) 则是判断 滑动距离 当手指在屏幕上划过距离超过 50rpx 则触发事件

微信文档: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值