一、scroll-view内部使用弹出层问题
在uniapp中使用scroll-view标签，其内部如果调用了poup等类似全局的弹出层，弹窗后引发相关的问题（弹出层始终仅在scroll-view内部），难以察觉找到问题所在。（h5端一般是正常的，主要是app端）
这是因为，scroll-view使用了scroll-y和scroll-x等属性，会导致超出部分被隐藏，这也是至今官方没有解决的，虽然更推荐将弹窗组件放置最外层，但是难以避免有时候在scroll-view内部使用封装调用的组件，这里提供一个简单的解决方案
动态的去改变isScroll，当弹出层弹出之前将isScroll设置为false，关闭之后再改为true，这样弹出的时候就会不受影响，关闭后也能正常滑动
scroll-view>
:scroll-y="isScroll"
scroll-view>
二、tabbar滚动条避免互相影响
在项目开发中，uniapp为了更好的用户体验，所有的页面均设置了类似keep-alive的缓存机制，虽然vue3的语法可以不用在template中设置根标签，但是你如果默认的没有限定在某个view视图层中或者使用scroll-view标签，就会使用根节点的滚动条，因此tabbar的各个界面滚动时都会收到影响。
三、项目中怎么使用echarts或者词云图之类的
项目中没有document的概念，可以借助renderjs,这样就能使用document获取节点进行渲染，然后通过调用echarts的updateEcharts来触发setOption更新数据
template>
view class="content">
view
@click="echarts.onClick"
:prop="option"
:change:prop="echarts.updateEcharts"
id="echarts"
class="echarts"
>view>
view>
template>
script>
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);
},
},
};
script>
script module="echarts" lang="renderjs">
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'
})
}
}
}
script>
style>
style>
三、app端不支持import.meta的读取
所以在配置环境变量的时候要注意，import.meta只适用h5端
四、scroll-view的滚动条问题
返回顶部不能直接设置成0，必须先随便给个值，再变成0才可以
const backTop = () => {
scrollTop.value = 1;
setTimeout(() => {
scrollTop.value = 0;
}, 10);
};
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: 为什么你的孩子应该学习编程思维？如何选择第一本编程思维启蒙书？
随着现代科技的不断发展，编程思维已经成为了一种越来越受欢迎的能力。它不仅有助于解决实际问题，也有助于发展孩子的思维和创造力。越来越多的父母开始意识到这一点，并希望为自己的孩子选择一本好的编程思维启蒙书。但是，在如此众多的选项中，该如何选择呢？ 本文将介绍为什么…
