微信小程序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里关闭小程序的下拉刷新

相关推荐
不想说话的麋鹿29 分钟前
「性能优化」虚拟列表极致优化实战:从原理到源码,打造丝滑滚动体验
前端·vue.js·面试
ouzz29 分钟前
我在 React Canvas 里做了一个液态玻璃透镜效果
canvas·视觉设计
一 乐1 小时前
工会管理|基于springboot + vue工会管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·工会管理系统
XTTX1102 小时前
Vue3+Cesium电子围栏效果
前端·javascript·vue.js
Ruihong2 小时前
你的 Vue 3 defineProps(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
小高0072 小时前
🔥前端性能内卷终点?Signals 正在重塑我们的开发习惯
前端·javascript·vue.js
VelinX3 小时前
【个人学习||vue】
前端·vue.js·学习
LXXgalaxy3 小时前
Vue3 列表数据流:从赋值入门到进阶(独立学习版)
javascript·vue.js·学习
J_liaty3 小时前
Vue2 从入门到精通
前端·javascript·vue.js
王霸天4 小时前
💥大屏卡成 PPT?这 3 个性能优化招数亲测有效
前端·vue.js·数据可视化