微信小程序中使用echarts，ios真机在swiper 组件上无法滑动图表

最新推荐文章于 2024-03-04 17:28:32 发布
最新推荐文章于 2024-03-04 17:28:32 发布
阅读量891 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianshou6442/article/details/113350990
版权

开发过程中，在模拟器和Android真机上使用图表在swiper 组件中滑动没有遇到任何问题，结果同事拿了iOS测试使用出现无法滑动的问题

因此查看了echarts官方文档和小程序官方文档

最后得到解决方法在设置图表属性的时候设置disableTouch的属性为true即可

   ec: {
      disableTouch: true,
    },

这样就可以解决在iOS真机上无法滑动的问题

希望遇到同样问题的同胞不要花费很多时间

stick6442
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE+Swiper+Echart问题
sunshineTing2的博客
03-01 602
问题 swiper中使用echarts，设置循环loop播放slide中第一个和最后一个echarts图展示不出来。 原因 使用以前通用的模式循环在echarts中使用id或者$refs获取元素初始化绘图不成功， 被复制的div中没有复制canvas（没有进行绘图操作）。 解决 const chartDom = document.getElementsByClassName('radar') chartDom.forEach(item => { const myChart = this.$echar
微信小程序iOS系统上echarts不能滑动的问题
厦门在乎科技
08-17 2511
在微信小程序中使用echarts插件的时候，遇到了一个问题：当系统是iOS时，如果手指先是长按图表，然后页面会无法滑动，其中南丁格尔玫瑰图尤其明显。作为一个微信小程序的新手开发，这个问题属实难倒我了。 解决方案： 1.添加遮罩层。 使用一个遮罩层覆盖echarts图表，这样的话，当长按并滑动页面的时候，滑动的就是这个遮罩层了，自然就可以解决问题。 遇到的问题： canvas是原生组件，层级很高，view无法作为遮罩层。我使用的是cover-view作为遮罩层。 <cover-vie
swiper 滚动模式下的Echarts图展示问题
肖肖肖丽珠的博客
01-13 966
ecahrt位于swiper里面。在微信开发者工具里查看没什么问题，正常拖拽。但是在手机上看的话，要么时echart没有加载出来。要么时位置不对。 感觉是swiper样式导致的，把他放在外面都是好的。 最后百度查到： 1.canvas 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。 2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。 3. css 动画对 canvas 组件无效。
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
mpvue-echarts放在小程序swiper苹果真机不能滑动问题
u014446094的博客
03-25 1001
主要原因：是在于canvas放在swiper里面苹果不能滑动，包括swiper-item的点击事件也触发不了，我看了微信社区也有不少人有这个问题，经过我的测试我推测是由于canvas作为原生组件层级太高盖过了swiper所以无法滑动（安卓能滑动）。 解决mpvue-echarts不能放swiper的方法：使用wx.canvasToTempFilePath把图表转换成图片就可以滑动了，不过由于图表渲...
uni-app使用ucharts跟随页面滚动
weixin_57923753的博客
05-17 1901
uni-app使用ucharts跟随页面滚动 可以使用<scroll-view :scroll-y="true">ucharts内容组件</scroll-view>包裹住就不会滚动页面时跟随页面掉样式， tips：切记，scroll-view替换在在最外层的view标签里面，否则使用效果不佳 ...
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
Swiper组件是微信小程序中用于创建滑动轮播效果的关键组件，适用于展示多张图片或者卡片信息。本文将详细介绍如何利用Swiper组件实现层叠轮播图，并自定义指示点样式以及图片描述信息。 首先，我们需要了解Swiper...
微信小程序中的swiper组件详解
08-30
在小程序开发中，swiper组件提供了丰富的功能，使得页面交互更加生动有趣。下面我们将深入探讨swiper组件的关键特性和用法。 首先，`<swiper>`标签是滑块视图容器，它包含了一系列`<swiper-item>`子元素，这些子...
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序 扩展组件 tabs 中的 swiper 部分高度自适应
03-29
由于官方给了 swiper 固定高度150，且 swiper-item 都是 absolute 定位，所以实际应用中经常会碰到问题，在此记录一下修改方式。 一、正常 npm 下载 tabs 包，并用开发者工具构建 npm 二、修改构建出的目录 ...
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
微信小程序 swiper组件 修改指示器圆点的样式位置等
天空之上有座城
06-29 4825
前言 微信小程序的swiper组件，官方文档没有给具体的配置接口，有时我们需要一些个性化的样式，看到某位大佬曾在 开放工具中看到了小圆点的class类名，现在似乎是看不到了，不过类名还可以使用 附上原文地址 http://www.qianduan8.com/1009.html 解决方案 一种是隐藏官方的指示点即把 indicator-dots=“{{false}}”传入swiper组件，自己写小圆点指示器的样式，然后通过 bindchange 监听swiper变化，动态更新小圆点样式 一种..
uni-app中在模拟器上内容可以滚动，真机上失效问题解决
yangyanqin2545的博客
01-11 919
1、刚刚开始使用的是view组件，给定了高度，超出部分y轴滚动，微信小程序模拟器上面一直为正常。2、为了适配真机，在view组件外边套用了scroll-view,利用该组件中的组件配置滚动。
解决微信小程序使用echart不随父元素及页面滑动问题
吴冬雪的博客
03-07 1334
看看是不是给最外层标签page定义了height：100%的属性或者overflow相关的属性，如果是的话去掉。检查你的canvas的所有父级元素是否设置了height：100%，overflow相关的属性(visible除外)，以及position相关的属性(relative,static除外)，如果是的话都去掉。 ...
echarts微信小程序图表不跟随滑动问题
热门推荐
xld的博客
08-20 1万+
使用echarts时界面滑动时，图标不跟随滑动，浮在元素上方。 【 问题原因】该布局中含有position:fixed或absulote的元素，导致echarts图表也被固定了儿无法滑动。 【 解决方法】所有父级元素（有包含ec-canvas的所有view元素）的position不可为fixed或absulote，将其改为其他，另外兄弟元素可以为position:absulote，不能是f...
微信小程序使用echarts 不跟随页面滚动
mmmm00_的博客
01-15 1093
echarts微信小程序组件：兼容小程序 Canvas的组件ec-canvas，可以方便地使用 ECharts，载gitHub项目。ec-canvas 目录下有一个 echarts.js，默认echarts-for-weixin 项目发版的时对应最新版的 ECharts，可以自行从官网自定义构建，并修改文件名为echarts.js，替换ec-canvas 目录下的 echarts.js，以减小文件大小。
微信小程序引入echarts折线图在ios真机上无法上下滑动的问题
qq_46103732的博客
03-04 646
在canvas上的canvas-id属性上设置 disableTouch: true。如果还不生效，就把代码中的touchMove事件去掉。2.修改遮罩层和canvas的z-index层级，无效。1.增加遮罩层，覆盖在图的上方，真机调试无效。
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
在微信小程序中请使用swiper组件，结合flex布局实现下图的效果。
05-25
非常感谢您的提问。根据您的要求，我为您提供以下代码示例供参考。请注意，由于不知道具体的页面布局，因此我只提供了基本的代码示例，您需要根据实际情况进行调整。 ```html <view class="swiper-container"> <swiper class="swiper" indicator-dots="false" autoplay="true" interval="5000" duration="1000"> <swiper-item> <view class="flex-container"> <view class="flex-item"></view> <view class="flex-item item1"></view> <view class="flex-item item2"></view> <view class="flex-item"></view> </view> </swiper-item> <swiper-item> <view class="flex-container"> <view class="flex-item"></view> <view class="flex-item item3"></view> <view class="flex-item item4"></view> <view class="flex-item"></view> </view> </swiper-item> <swiper-item> <view class="flex-container"> <view class="flex-item"></view> <view class="flex-item item5"></view> <view class="flex-item item6"></view> <view class="flex-item"></view> </view> </swiper-item> </swiper> </view> ``` ```css .swiper-container { width: 100%; height: 200rpx; } .swiper { width: 100%; height: 100%; } .flex-container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .flex-item { flex: 1; height: 100%; } .item1 { background-color: #ff5d5d; } .item2 { background-color: #ffaa00; } .item3 { background-color: #ffc107; } .item4 { background-color: #4caf50; } .item5 { background-color: #2196f3; } .item6 { background-color: #9c27b0; } ``` 在上面的代码中，我们使用了 swiper 组件来实现轮播效果，并且结合 flex 布局来实现图中所示的效果。我们使用了 3 个 swiper-item 元素，每个元素中包含一个 flex-container 元素和 4 个 flex-item 元素。其中，每个 flex-item 元素的宽度都是平均分配的，因此可以实现每个元素平均分布的效果。通过为每个 flex-item 元素添加不同的样式，可以实现不同的背景色。 希望这个示例代码能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值