问题总结20-12-21至20-12-27

⭐各个浏览器隐藏滚动条

 1 /* 谷歌浏览器 */
 2 选择器::-webkit-scrollbar {display:none}
 3 
 4 /* 火狐浏览器 */
 5 div {
 6     -ms-overflow-style: none;
 7 }
 8 
 9 /* IE /Edge */
10 div {
11     scrollbar-width: none
12 }

⭐移动端适配

https://mydarling.gitee.io/resource/note/rem.html

⭐react报错：Can't perform a React state update on an unmounted component

项目中遇到的问题是因为组件在销毁时定时器没有按时清除。

https://blog.csdn.net/u010565037/article/details/88716681

⭐react中className动态控制样式

1 yarn add classnames@^2.2.6

1 <li
2     styleName={
3         classNames('date', { 'cur': this.state.date === item.date })
4     }
5     key={item.id}>
6 </li>

⭐react在使用TypeScript编写时遇见“Readonly＜{}＞“上属性不存在的原因

 1 import  { Component} from 'react'
 2 import React from "react"
 3 import {Age} from "./age"
 4 export const UserContext = React.createContext({
 5   name: "Alex",
 6   age: 26
 7 })
 8 //定义一个接口，目的是为后面的state提供类型，以便通过编译器的检查
 9 interface test {
10   name:'john',
11   age:18
12 }
13 //这里的any用来定义props的类型，test接口用来定义this.state的类型
14 class App extends Component <any,test>{
15     constructor(props :any){
16       super(props);
17 
18       this.state = {
19         name:'john',
20         age:18
21       }
22     }
23     render(){
24       return(
25         <div>
26           <UserContext.Provider value = {this.state} >
27             <Age></Age>
28           </UserContext.Provider>
29         </div>
30     
31       );
32     }
33 }
34 
35 export default App;

⭐react中父组件异步修改参数，传递给子组件时遇到的问题

父组件传递的参数改变后，子组件会重新渲染的只有render函数，在子组件的render函数中，就可以获取到父组件传来的值了。

https://blog.csdn.net/u012131835/article/details/81703814

⭐echarts中boundaryGap用法

可以把图表的坐标轴按比例缩放。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ECharts</title>
 6     <!-- 引入 echarts.js -->
 7     <script src="echarts.js"></script>
 8 </head>
 9 <body>
10     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
11     <div id="main" style=" 600px;height:400px;"></div>
12     <script type="text/javascript">
13         // 基于准备好的dom，初始化echarts实例
14         var myChart = echarts.init(document.getElementById('main'));
15  
16         // 指定图表的配置项和数据
17         option = {
18             xAxis: {
19                 type: 'category',
20 //              boundaryGap: false,
21                 boundaryGap:["0.5","0"],
22                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
23             },
24             yAxis: {
25                 type: 'value',
26                 boundaryGap:["1","1"]
27             },
28             series: [{
29                 data: [100, 932, 901, 934, 1290, 1330, 1320],
30                 type: 'line',
31                 areaStyle: {}
32             }]
33         };// 使用刚指定的配置项和数据显示图表。
34         myChart.setOption(option);
35     </script>
36 </body>
37 </html>

https://blog.csdn.net/qq_44687755/article/details/97938265

⭐echarts绘制折线图平均线

 1 option = {
 2     tooltip:{
 3         trigger: 'axis'    //鼠标悬浮提示
 4     },
 5     xAxis: {
 6         axisLabel:{
 7             color:"#6f6f6f"   //改变X轴坐标值颜色
 8         },
 9         axisLine:{
10             lineStyle:{
11                 color:"#cfcfcf"   //改变x轴线颜色
12             }
13         },
14         axisTick:{
15             lineStyle:{
16                 color:"#cfcfcf"    //改变x轴线上的刻度颜色
17             }
18         },
19         type: 'category',
20         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
21     },
22     yAxis: {
23         axisLabel:{
24             color:"#6f6f6f"
25         },
26         axisLine:{
27             lineStyle:{
28                 color:"#cfcfcf"
29             }
30         },
31         axisTick:{
32             lineStyle:{
33                 color:"#cfcfcf"
34             }
35         },
36         type: 'value'
37     },
38     visualMap:{
39         orient:"horizontal",     //图例横向展示，vertical纵向展示
40         itemSymbol:"circle",     
41         show:true,            //展示图例
42         top:0,                //图例位置
43         right:10,             //图例位置
44         textGap:10,           //图例文字距离
45         itemGap:20,           //图例之间距离
46         itemWidth:12,         //图例图形宽度
47         itemHeight:12,
48         pieces:[
49             {min:0,max:1100,label:"平均值之下",color:"blue",symbol:"emptyCircle"},    //设置范围区域，label是图例的名称，symbol图例的形状
50             {min:1100,label:"平均值之上",color:"red",symbol:"emptyCircle"}
51         ]
52     },
53     series: [{
54         smooth:true,     //折线图展示有弧度
55         symbol:"circle",   
56         markLine:{       //平均线设置
57             silent:true,    //true 去掉鼠标悬浮该线上的动画
58             symbol:"none",   //该线无样式
59             label:{
60                 show:false     //该线上的值去掉
61             },
62             lineStyle:{        //设置该线样式
63                 normal:{
64                     type:"solid",
65                     color:"#666666"
66                 }
67             },
68             data:[{
69                     yAxis:1100,    //线的值
70                     name:"target"
71                 }]
72         },
73         data: [820, 932, 901, 934, 1290, 1330, 802],
74         type: 'line'
75     }]
76 };

如果要添加多条辅助线：

 1  markLine: {
 2                 silent: true,
 3                 data: [{
 4                     yAxis: 5
 5                 }, {
 6                     yAxis: 10
 7                 }, {
 8                     yAxis: 15
 9                 }, {
10                     yAxis: 25
11                 }, {
12                     yAxis: 35
13                 }],
14                 lineStyle: {
15                     normal: {
16                     type: 'solid',
17                 },
18             },

⭐css3设置边框图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  
 8         .box {
 9             width: 300px;
10             height: 300px;
11             margin: 100px auto;
12             border: 27px solid #000;  /* 不设置border有可能显示不出边框图片 */
13  
14             /* 设置边框图片的各种属性 */
15             border-image-source: url("11.png");  /* 边框图片的路径 */
16             border-image-slice: 27 27 27 27;    /* 边框图片的裁剪(裁剪出四个角),不需要单位 */
17             border-image-width: 27px;
18             border-image-repeat: round;   /* 平铺方式 repeat:平铺可能显示不完整 round:平铺但会自动调整 stretch:拉伸 */
19         }
20  
21     </style>
22 </head>
23 <body>
24     <div class="box"></div>
25 </body>
26 </html>

⭐React警告：Received NaN for the `children` attribute. If this is expected, cast the value to a string.

解决：将运算结果转为字符串 <span>{ Math.abs(goal.goalInfo.pretimes - goal.usergoalInfo.cpt_times ).toString() }</span>。

⭐使用 moment.js 获取相关时间

https://blog.csdn.net/ZYS10000/article/details/105281295/

⭐css鼠标呈手指型

1 div{ cursor:default }默认正常鼠标指针
2 div{ cursor:hand }和div{ cursor:text } 文本选择效果
3 div{ cursor:move } 移动选择效果
4 div{ cursor:pointer } 手指形状 链接选择效果
5 div{ cursor:url(url图片地址) }设置对象为图片

⭐react 子组件改变父组件状态

 1 class Father extends Component {
 2 
 3     construtor(props){
 4         super(props);
 5         this.state={
 6             name: 'Peter',
 7             age: '26'
 8         }
 9     }
10     onChangeState(stateName){
11         this.setState(stateName)
12     }
13     render(){
14         <p>姓名：{this.state.name}</p>
15         <p>年龄：{this.state.age}</p>
16         <Child onClicked={this.onChangeState.bind(this)}/>
17     }
18 }
19  
20  
21  
22 class Child extends Component {
23     render(){
24         <Button onClicked={()=>this.props.onClicked({name: 'John'})}/>
25     }
26 }

⭐JavaScript中数字与字符串相互转化

https://www.cnblogs.com/craftsman-gao/p/4638700.html

⭐echarts柱状图颜色设置

 1 option = {
 2     //这里就不重要了，可以删掉
 3     color: ['#c23531','#2f4554', '#61a0a8'],
 4     xAxis: {
 5         type: 'category',
 6         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 7     },
 8     yAxis: {
 9         type: 'value'
10     },
11     series: [{
12         data: [120, 200, 150, 80, 70, 110, 130],
13         type: 'bar',
14         itemStyle: {
15             normal: {
16 　　　　　　　　//这里是重点
17                 color: function(params) {
18                     //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
19                     var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
20                     return colorList[params.dataIndex]
21                 }
22             }
23         }
24     }]
25 };

https://blog.csdn.net/weixin_43798882/article/details/89848153

⭐echarts柱状图顶部显示数字

 1 series : [
 2            {
 3                type:'bar',
 4                barWidth:50,
 5                data:[10, 52, 200, 334, 390, 330, 220],
 6                itemStyle: {
 7                    normal: {
 8                        label: {
 9                            show: true,      //开启显示
10                            position: 'top', //在上方显示
11                            textStyle: {     //数值样式
12                                color: 'black',
13                                fontSize: 16
14                            }
15                        }
16                    }
17                }
18            }
19        ],

⭐echarts更改坐标轴文字颜色及大小

 1 xAxis: {
 2     data: anameArr,
 3     axisLabel: {
 4        show: true,
 5         textStyle: {
 6           color: '#c3dbff',  //更改坐标轴文字颜色
 7           fontSize : 14      //更改坐标轴文字大小
 8         }
 9      },
10      axisTick: {
11          show: false
12      },
13      axisLine:{
14          lineStyle:{
15             color:'#315070' //更改坐标轴颜色
16          }
17    }
18 }

⭐js截取字符串的后几位数

1 var str="abcdefghhhh";//截取后4位
2 str.substring(str.length-4)；

⭐echarts的矩形树图（treemap）去掉图表下方的标题

解决：在series中加入breadcrumb: { show: false} 。

⭐toFixed( )返回值为字符串

https://www.cnblogs.com/gmq-sh/p/4287635.html

⭐CSS伪元素画分割线

https://blog.csdn.net/hope_it/article/details/103643950

⭐React路由传参的三种方式

如果要路由传参，必须写成 <Route exact path='/live/:id' component={Live}></Route>

exact是Route下的一个属性，react路由会匹配到所有能匹配到的路由组件，exact能够使得路由的匹配更严格一些。

exact的值为bool型，为true时表示严格匹配，为false时为正常匹配。

1 <Route exact path='/' component={Home} />
2 <Route path='/page' component={Page} />
3 //这样匹配路由path='/page'，只会匹配到Page组件

https://www.cnblogs.com/houjl/p/10056718.html

⭐react行间style加backgroundImage

1 <div style={{backgroundImage : `url(${this.props.BackGroundImageUri})`}}>
2 1222
3 </div>

1 style={{backgroundImage:"url("+require("./image/pic-img1.jpg").default+")"}}

⭐HTML5<video>报错Uncaught (in promise) DOMException解决方法

主要原因是谷歌不允许自动播放音频。

https://www.mzwu.com/article.asp?id=4411

⭐测试结果OK、NG、NT、POK的意思

OK：pass，测试通过。

NG：not good/not go/fail，不通过。

NT：not test，未测试。

POK：部分通过。

⭐video.js视频高度自适应解决方法

解决：设置video标签的class为“video-js vjs-default-skin vjs-big-play-centered vjs-16-9”。

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3  
 4     <head>
 5         <meta charset="utf-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <title>详情</title>
 8         <link rel="stylesheet" href="../../css/video.css" />
 9         <script type="text/javascript" src="../../js/video.js" ></script>
10     </head>
11  
12     <body>
13         <div class="pageContent">
14             <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" poster="" data-setup="{}">
15                 <source src="http://1256913445.vod2.myqcloud.com/d48fa54fvodtransgzp1256913445/a387f9385285890780745318298/v.f20.mp4" type="video/mp4"></source>
16             </video>
17         </div>
18     </body>
19  
20 </html>

⭐echarts折线图的小圆点颜色

1 series: [{
2     type: 'line',
3     symbol: 'circle', // 设置标记的图形为circle
4     itemStyle: {
5         color: "#6c50f3"
6     }
7     ...
8  }]

⭐react 路由（Link 跳转和编程式路由）

https://blog.csdn.net/zyp1101996/article/details/104483602

⭐react跳转路由报错Cannot read property ‘push’ of undefined

history={this.props.history} 跳转路由的时候需要从顶层父组件一直传下来

https://blog.csdn.net/weixin_37865166/article/details/89477489

⭐css下拉菜单demo

 1 <style>
 2 .dropdown {
 3     position: relative;
 4     display: inline-block;
 5 }
 6 
 7 .dropdown-content {
 8     display: none;
 9     position: absolute;
10     background-color: #f9f9f9;
11     min-width: 160px;
12     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13     padding: 12px 16px;
14     z-index: 1;
15 }
16 
17 .dropdown:hover .dropdown-content {
18     display: block;
19 }
20 </style>
21 
22 <div class="dropdown">
23   <span>Mouse over me</span>
24   <div class="dropdown-content">
25     <p>Hello World!</p>
26   </div>
27 </div>