【uniapp】踩坑日记核心重点

一、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);
};