微信小程序canvas组件横向溢出滚动（基于wx-charts）

最新推荐文章于 2025-05-26 15:21:20 发布

风雪夜过客

最新推荐文章于 2025-05-26 15:21:20 发布

阅读量7.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： canvas滚动 wx-charts 微信小程序折线图

本文链接：https://blog.youkuaiyun.com/qq_15964039/article/details/80107616

本文介绍了在微信小程序中使用wx-charts遇到的canvas折线图数据过多导致展示拥挤的问题，以及如何通过监听scroll事件和动态设置canvas宽度来实现横向滚动的效果。尽管存在滚动不流畅和无法使用wx-charts内置触摸处理的不足，但提供了一种解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司要求在微信小程序里插入折线图，上网搜了下，发现wx-charts还挺好用的，就用他了。
wx-charts具体用法就不介绍了，网上有很多教程，还有不懂的可以留言讨论。折线图完成了，却发现了一个问题：展示数据长度不确定，导致如果数据很长的话，数据就会挤成一团，很不好看，如果长度较大，canvas能滚动就好了。
动态设置canvas宽度不难：获取数据长度，让canvas长度为数据长度乘以固定值，再获取屏幕宽度，如果canvas宽度小于屏幕宽度，让canvas宽度等于屏幕宽度：

width: windowWidth < simulationData.categories.length * 70 ? simulationData.categories.length * 70 : windowWidth

在web网页里，直接设置父元素固定宽度，子元素宽度超过父元素，让父元素overflow：auto;就行了，可是对微信小程序的canvas组件不起作用。
第一时间想到scroll-view组件，马上给view套上，在开发者工具里面预览ok，就以为完事大吉了，哪想真机测试滚动完全没反应，仔细查看api才发现：
这里写图片描述
原来scroll-view里不支持canvas，可是一定要canvas滚动怎么办呢？
研究发现，虽然canvas不会响应scroll-view的滚动，但是bindscroll方法是有返回值的：

<scroll-view class='canvas-container' scroll-x='{
   
   {true}}' bindscroll="scroll">
    <canvas canvas-id="lineCanvas" disable-scroll="true"></canvas>
</scroll-view>

scroll:function(e){
    console