【uniapp】踩坑日记核心重点 |
您所在的位置：网站首页 › uniapp开发项目引用echarts › 【uniapp】踩坑日记核心重点 |
|
一、scroll-view内部使用弹出层问题 在uniapp中使用scroll-view标签，其内部如果调用了poup等类似全局的弹出层，弹窗后引发相关的问题（弹出层始终仅在scroll-view内部），难以察觉找到问题所在。（h5端一般是正常的，主要是app端） 这是因为，scroll-view使用了scroll-y和scroll-x等属性，会导致超出部分被隐藏，这也是至今官方没有解决的，虽然更推荐将弹窗组件放置最外层，但是难以避免有时候在scroll-view内部使用封装调用的组件，这里提供一个简单的解决方案 动态的去改变isScroll，当弹出层弹出之前将isScroll设置为false，关闭之后再改为true，这样弹出的时候就会不受影响，关闭后也能正常滑动 :scroll-y="isScroll"二、tabbar滚动条避免互相影响 在项目开发中，uniapp为了更好的用户体验，所有的页面均设置了类似keep-alive的缓存机制，虽然vue3的语法可以不用在template中设置根标签，但是你如果默认的没有限定在某个view视图层中或者使用scroll-view标签，就会使用根节点的滚动条，因此tabbar的各个界面滚动时都会收到影响。 三、项目中怎么使用echarts或者词云图之类的 项目中没有document的概念，可以借助renderjs,这样就能使用document获取节点进行渲染，然后通过调用echarts的updateEcharts来触发setOption更新数据 var datas = []; export default { data() { return { option: { series: [ { data: [], }, ], }, }; }, props: { word_cloud: { default: () => [], }, }, mounted() { this.word_cloud_datas = this.word_cloud; this.upChartsOption(); }, methods: { upChartsOption() { this.option.series[0].data = this.word_cloud; }, onViewClick(options) { console.log(options); }, }, }; import 'echarts-wordcloud'; import * as echarts from 'echarts'; import { videoDetailStore } from '@/stores/videoDetail'; let myChart; export default { mounted() { this.initEcharts() }, methods: { initEcharts() { if(echarts.init){ myChart = echarts.init(document.getElementById('echarts')) // 观测更新的数据在 view 层可以直接访问到 myChart.setOption({ backgroundColor: '#fff', // canvas背景颜色 // canvas标题配置项 series: [ { type: 'wordCloud', shape: 'circle', //circle cardioid diamond triangle-forward triangle left: 0, right: 0, top: 0, width: '100%', height: '100%', gridSize: 0, //值越大，word间的距离越大，单位像素 sizeRange: [10, 40], //word的字体大小区间，单位像素 rotationRange: [-90, 90], //word的可旋转角度区间 textStyle: { color: function () { const colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3']; return colors[parseInt(Math.random() * 10)]; }, emphasis: { shadowBlur: 2, shadowColor: '#000', }, }, data: [], backgroundColor: 'rgba(100, 255, 255, 0.6)', }, ], }) } }, updateEcharts(newValue, oldValue, ownerInstance, instance) { // 监听 service 层数据变更 if(myChart){ myChart.setOption(newValue) } }, onClick(event, ownerInstance) { // 调用 service 层的方法 ownerInstance.callMethod('onViewClick', { test: 'test' }) } } }三、app端不支持importa的读取 所以在配置环境变量的时候要注意，importa只适用h5端 四、scroll-view的滚动条问题 返回顶部不能直接设置成0，必须先随便给个值，再变成0才可以 const backTop = () => { scrollTop.value = 1; setTimeout(() => { scrollTop.value = 0; }, 10); }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |