iOS
系统上echarts
不能滑动的问题在微信小程序中使用echarts
插件的时候,遇到了一个问题:当系统是iOS
时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显。作为一个微信小程序的新手开发,这个问题属实难倒我了。
使用一个遮罩层覆盖echarts
图表,这样的话,当长按并滑动页面的时候,滑动的就是这个遮罩层了,自然就可以解决问题。
遇到的问题:
canvas
是原生组件,层级很高,view
无法作为遮罩层。我使用的是cover-view
作为遮罩层。
<cover-view wx:if="{{isIOS}}" class="echart-mask" ></cover-view>
<e-chart
chart-class='echart'
option='{{ data.getEChartOption(employeeInfoList) }}'
bindinstance='getEchartInstance'
/>
再添加了遮罩层之后,在iOS
系统上可以正常滑动,但是在Android
系统上又无法滑动了(真是风水轮流转 ̄へ ̄)。我是在页面上对系统进行判断,以决定是否创建遮罩层。
wx.getSystemInfo({
success: (result) =>this.setData({ isIOS: result.system.match(/iOS/) }),
});
因为echarts
图标在我这只是进行数据展示,而不会与用户进行交互,所以也考虑到了在echarts的过渡动画走完之后,用图片来代替echarts
组件。
getEchartInstance({ detail: echart }) {
echart.on('finished', () => {
echart
.getDom()
.saveAsImage()
.then((path) => {
this.setData({ homeworkCountEchartImg: path });
});
});
},
遇到的问题:
在图片替换echarts
的时候,出现了一次闪烁。要注意在图片加载完毕之后再移除echarts
,可以使用image
的bindload
来控制。
echart
插件的disableTouch
属性。在option
对象的根目录,添加disableTouch
属性,设为true即可。这是微信echarts
插件官方技术人员给出的一种解决方案。(吐槽一下微信小程序的文档,太简洁了,完全没有找到这个属性的只言片语好吧,新手很无奈呀(??へ??╬))。
var eChartOption = {
disableTouch: true, //解决ios系统,echarts长按不能滑动的问题
color: [
'#79db66',
'#769efd',
'#f6994f',
'#f5df4e',
'#a668f5',
'#66cbdb',
'#dc76fd',
'#6062e0',
'#ec7997',
'#88e6be',
],
legend: {
selectedMode: false,
show: false,
},
}
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...