問題總結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="width: 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>