微信小程序canvas拖动卡顿问题解决方法

微信小程序canvas拖动卡顿解决@handleTouchMove

问题:滑动严重卡顿。

分析:

  1. 可能是**@handleTouchMove执行太快**,使用计时器控制执行速度,明显变流畅,上滑很流畅,但是下滑依旧卡顿。
javascript 复制代码
handleTouchMove(e) {
	if (!this.isReDraw) {
		.......
		setTimeout(() => { // 控制执行速度
			this.isReDraw = false;
		}, 10);
	}
},
  1. 统计handleTouchMove执行频率,发现上滑时执行频率正常,下滑时执行频率很慢,分析可能是和其他下滑事件冲突 。尝试关闭全局滑动事件:在最外层view中添加:@touchmove.stop.prevent="() => {}"
javascript 复制代码
<template>
	<view @touchmove.stop.prevent="() => {}">

另外记得在pages.json里关闭小程序的下拉刷新

相关推荐
OpenTiny社区2 分钟前
TinyVue v3.31 更新速览:新组增件 + 文档优化,多项实用能力升级
vue.js
用户62960593247056 分钟前
一次位置调整引发的画布失忆:深入 Vue2 虚拟 DOM 复用机制
前端·vue.js
Sterting8 分钟前
条件渲染与列表渲染
前端·vue.js
木公子28 分钟前
Vue3源码精读03:响应式核心依赖追踪机制|track与trigger底层源码全解析
前端·vue.js
看到我请叫我铁锤1 小时前
vue编写web端在线预览文档
前端·javascript·vue.js
90后的晨仔13 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
C++、Java和Python的菜鸟18 小时前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花19 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
用户8417948145621 小时前
vxe-table 实现编辑列的权限控制:列级与表级权限管理
vue.js
Tian_Hang21 小时前
Vue3 父子组件通讯
前端·javascript·vue.js