uniapp小程序ucharts点击穿透和点击位置偏移解决方案

javascript 复制代码
<!-- #ifdef MP-WEIXIN -->
<qiun-data-charts 
    type="column" 
    :loadingType="1" 
    :chartData="chartData" 
    :opts="opts" 
    :ontouch="true" 
    :canvas2d="true"
    canvas-id="column" 
    inScrollView="true"/>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<qiun-data-charts 
    type="column" 
    :loadingType="1" 
    :chartData="chartData" 
    :opts="opts" 
    :ontouch="true" 
    :canvas2d="true"
    canvas-id="column"/>
<!-- #endif -->

加上这些,完美解决

问题如标题,解决办法是在微信小程序中添加 inScrollView="true"属性。

另说明:canvas2d="true"作用,开启canvas2d渲染模式,需要与canvas-id="xxx" 一起使用。

如不开启会存在图表层级过高,不跟随页面滑动等问题。

相关推荐
请叫我欧皇i6 分钟前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三8 分钟前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手10 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
阿金要当大魔王~~11 分钟前
uniapp img 动态渲染 的几种用法
java·服务器·前端·1024程序员节
知识分享小能手12 分钟前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
摸鱼的老谭19 分钟前
Java 25 中的最佳新特性
java·1024程序员节
lang2015092834 分钟前
Spring Boot健康检查全解析
java·spring boot·后端
我是华为OD~HR~栗栗呀1 小时前
华为OD-Java面经-21届考研
java·c++·后端·python·华为od·华为·面试
考虑考虑2 小时前
流收集器
java·后端·java ee
今天背单词了吗9802 小时前
Spring Boot+RabbitMQ 实战:4 种交换机模式(Work/Fanout/Direct/Topic)保姆级实现
java·spring·中间件·rabbitmq·1024程序员节