共计 1275 个字符,预计需要花费 4 分钟才能阅读完成。
微信小程序 iOS
零碎上 echarts
不能滑动的问题
在微信小程序中应用 echarts
插件的时候,遇到了一个问题:当零碎是 iOS
时,如果手指先是长按图表,而后页面会无奈滑动,其中南丁格尔玫瑰图尤其显著。作为一个微信小程序的老手开发,这个问题属实难倒我了。
解决方案:
1. 增加遮罩层。
应用一个遮罩层笼罩 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/) }), });
2. 将图表转为图片展现。
因为 echarts
图标在我这只是进行数据展现,而不会与用户进行交互,所以也思考到了在 echarts 的过渡动画走完之后,用图片来代替 echarts
组件。
getEchartInstance({detail: echart}) {echart.on('finished', () => {
echart
.getDom()
.saveAsImage()
.then((path) => {this.setData({ homeworkCountEchartImg: path});
});
});
},
遇到的问题:
在图片替换 echarts
的时候,呈现了一次闪动。要留神在图片加载结束之后再移除 echarts
,能够应用image
的bindload
来管制。
3. 应用 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,
},
}
正文完