css滿屏問題
設(shè)置html<meta viewport-fit="cover " />
屏幕上安全距離: safe-area-inset-top 屏幕右安全距離: safe-area-inset-right 屏幕下安全距離: safe-area-inset-bottom 屏幕左安全距離: safe-area-inset-left
設(shè)置html<meta viewport-fit="contain" />
默認(rèn)：viewprot-fit:contain;頁面內(nèi)容顯示在safe area內(nèi)
ios手機(jī)點(diǎn)擊頁面返回的時(shí)候都是返回到上一層頁面的頂部，而不是返回之前頁面滑動(dòng)的位置
在頁面被銷毀的生命周期componentWillUnmount記錄頁面的scrollTop的數(shù)值然后在componentDidMount將之前記錄的scrollTop賦值給當(dāng)前頁面元素
在頁面全局被設(shè)置了安全區(qū)域的時(shí)候，某一個(gè)頁面的按鈕需要在頁面的底部展示
設(shè)置button{position:fixed;buttom:0}在安卓手機(jī)和蘋果手機(jī)沒有小劉海的手機(jī)上是ok的，但是在ios11+的系統(tǒng)上按鈕并沒有設(shè)置到最底部赠潦，需要給當(dāng)前頁面設(shè)置一個(gè)高度直接用100vh的時(shí)候葛峻，頁面會(huì)出現(xiàn)滾動(dòng)條特占，如果設(shè)置了安全區(qū)域的話，需要把頂部的安全區(qū)域和底部的安全區(qū)域減掉
height:calc(100vh - env(safe-area-inset-top) -env(safe-area-inset-bottom) )//針對(duì)ios11.2+
height:calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom))//針對(duì)ios11.2
react項(xiàng)目中防止按鈕重復(fù)點(diǎn)擊，重復(fù)進(jìn)入新頁面
就是按照正常思路來寫(額外加一個(gè)setTimeout)
this.state = { canClick:true } handleChange = ()=>{ const { canClick } = this.state; const that = this; if(canClick){ this.setState({canClick:false}) //邏輯代碼 //定時(shí)器異步恢復(fù)按鈕的可點(diǎn)擊性 setTimeout(()=>{ ttat.setState({ canClick:true }) },10) } }
react項(xiàng)目中使用echarts
如果echarts沒有tooltip害捕，盡管設(shè)置了也不起作用，可能是需要單獨(dú)引入tootip的文件
import 'echarts/lib/component/tooltip';
echarts富文本用法:
formatter:'{className1|{value}}{className2|常量}'
柱狀圖數(shù)據(jù)多的情況下（超過100條）ios手機(jī)上不顯示圖表
搜了一下是因?yàn)殇秩镜闹鶢顖D的寬高的面積超過了canvas畫布的最大面積
Canvas area exceeds the maximum limit (width * height > 16777216).
解決方案：看了一下echarts的官網(wǎng)echarts4.0以上的可以用svg來畫圖表
import 'zrendered/lib/svg/svg' let myChart = echarts.init(chart,null, { renderer: 'svg});
或者
let myChart = echarts.init(chart,null, { devicePixelRatio: 2});
echarts雷達(dá)圖實(shí)現(xiàn)總值在最中間顯示闷畸，最里面的一層用白色打底尝盼，如果需要顯示層級(jí)關(guān)系則可以使用echarts的Z屬性，在series中有多個(gè)對(duì)象佑菩，每一個(gè)對(duì)象設(shè)置Z的值盾沫，可以參考官方文檔
option = { title: { text: '88', x: 'center', y: 'center', textStyle: { color: '#333', fontWeight: 'bolder', fontSize: 64, } }}
在定義的option中加一個(gè)title的屬性即可裁赠，至于中間的白色五邊形，可以設(shè)置每一個(gè)值都一樣然后設(shè)置區(qū)域顏色為白色
series:[{
type:"radar",
z:2,
animation:false,
silent:true//圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件赴精，默認(rèn)為 false佩捞，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
data:[{
value:[],
itemStyle:{
normal:{}
},
areaStyle:{color:"blue",opacity:0.6}
},//藍(lán)色區(qū)域
},{
type:"radar",
z:4,
animation:false,
silent:true//圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件蕾哟，默認(rèn)為 false一忱，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
data:[
{
value:[],
itemStyle:{
normal:{}
},
areaStyle:{color:"#fff",opacity:1}
}//白色區(qū)域]
}]
網(wǎng)絡(luò)不好的情況下谭确，在同一個(gè)canvas容器中切換不同數(shù)據(jù)的圖表切換的時(shí)候會(huì)出現(xiàn)圖表的動(dòng)畫效果觸發(fā)兩次帘营，原因：option的值從請(qǐng)求接口重新獲取，react的setState是異步賦值option,切換按鈕會(huì)導(dǎo)致按鈕的setState逐哈，觸發(fā)render芬迄，此時(shí)option還是原來的數(shù)據(jù)echarts會(huì)執(zhí)行setOption，因?yàn)閑charts圖表設(shè)置animation:true,所以會(huì)出現(xiàn)動(dòng)畫昂秃，等option的值被替換成最新的內(nèi)容的時(shí)候會(huì)觸發(fā)setOption禀梳，重新渲染的時(shí)候也會(huì)有動(dòng)畫效果，所以才造成兩次動(dòng)畫效果
解決方案：
1.可以把動(dòng)畫效果屏蔽掉animation:false
2.設(shè)置兩種狀態(tài)currentSelect肠骆，lastedStatus
const option = {radar:{},series:[
{type:"radar"}
]}
handleChange = (type)=>{
this.setState({
currentSelect:type//記錄按鈕切換的狀態(tài)
})
this.loadMore(type)
}
loadMore = (type)=>{
func().then((res)=>{
if(res.code === 200){
option.series[0].data[0].value = res.data;
this.setState({
lastedStatus:type//記錄option更新狀態(tài)
option：option
})
}
})
}
render(){
if(this.state.currentSelect === this.state. lastedStatus){
myChart.setOption(this.state.option)
}
}
頁面切換的時(shí)候出現(xiàn)閃屏出皇，頁面無法更新
用amtd-mobile的tabs將多個(gè)頁面拼湊成一個(gè)頁面就不會(huì)出現(xiàn)閃屏問題
但是切換tabs的時(shí)候有的頁面會(huì)更新不及時(shí)，我的解決方案：
<Tabs> {currentPage==="1"?<Page1 />:""} {currentPage==="2"?<Page2 />:""} {currentPage==="3"?<Page3 />:""} </Tabs>
在監(jiān)聽tabs切換的事件中更新currentPage的值
ios12的系統(tǒng)中設(shè)置echarts柱狀圖滾動(dòng)的時(shí)候會(huì)破壞布局
設(shè)置了position：fiexd就會(huì)受到影響哗戈，可以嘗試先設(shè)置echarts的tooltip的triggerOn
如果還是不起作用將當(dāng)前頁面的所有設(shè)置position:fiexed改為position:absolute(在不影響整體布局的情況下)
有的樣式在手機(jī)上不起作用
根據(jù)兼容性給樣式添加-webkit-
-webkit-flex:1; flex:1
h5頁面喚起app成功之后重新回到h5頁面依然會(huì)執(zhí)行下載app
先判斷h5運(yùn)行的環(huán)境分為三種
var u = navigator.userAgent;
let isWeixin= u.toLowerCase().indexOf('micromessenger')!== -1;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let hasApp=false;
if(isWeixin){
//提示需要在瀏覽器里面運(yùn)行郊艘，因?yàn)槲⑿抛詭У臑g覽器無法用配置的url scheme喚起app
alert("請(qǐng)?jiān)跒g覽器運(yùn)行詞鏈接")
}else{
if(isAndroid ){
window.location.href = "喚起app的url"http://URL Scheme方式喚起Activity或App
//判斷是否喚起成功，只有失敗的時(shí)候才會(huì)執(zhí)行下載apk的代碼
this.checkOpen((opened)=>{
if(!opened){ hasApp = false;//系統(tǒng)沒有此app唯咬，喚起失敗}else{
hasApp = true;
}
})
setTimeout(()=>{
let hidden = window.document.hidden;
if(typeof hidden === "undefined"||hidden === false&&!hasApp){
window.location.href = "下載apk的url地址"
}
},2000)
}
if(isIOS){ //ios等同于安卓的寫法}
}
//判斷是否喚起app
checkOpen = (cb)=>{
const clickTime = +(new Date());
function check(elseTime){
if(elseTime>3000||document.hidden){cb(true)}else{cb(false)}
}
let count = 0;let intHandle = null;
intHandle = setTiterval(()=>{
count++;
const elseTime = +(new Date()) - clickTime;
if(count>100||elseTime>3000){
clearInterval(intHandle );check(elseTime)
}
},20)
}
這個(gè)解決方案也是我百度參考了網(wǎng)上寫的文章：
http://www.reibang.com/p/21380058d609
https://www.cnblogs.com/shoestrong/p/9436722.html
另外一種方案就是借助callapp-lib插件,
在蘋果手機(jī)上可以設(shè)置timeout:0,可以避免長(zhǎng)時(shí)間喚起app失敗自動(dòng)跳轉(zhuǎn)App store的問題
安卓手機(jī)的話纱注，測(cè)試了小米，三星胆胰，vivo狞贱，華為，只有華為手機(jī)還是在長(zhǎng)時(shí)間喚起app沒跳轉(zhuǎn)之后自動(dòng)下載app蜀涨，其他的手機(jī)會(huì)刷新一下當(dāng)前頁面
h5頁面實(shí)現(xiàn)slider兩邊滑動(dòng)的效果
antd-mobile里面有個(gè)Range的組件瞎嬉，但是看了一下沒有tooltip顯示當(dāng)前滑動(dòng)的數(shù)值，在網(wǎng)上搜了一個(gè)適合react的滑動(dòng)插件rc-slider厚柳，api上面介紹了該插件的多種用法氧枣，我在項(xiàng)目中使用的是Range
<Range min={0} max={1000} defaultValue={[creditScoreStart,creditScoreEnd]}
allowCross={false}
tipFormatter={value => `${value}`}
tipProps={
{"prefixCls": 'rc-slider-tooltip',
"placement": 'top',
"visible": true//設(shè)為true顯示數(shù)值的tooltip就會(huì)一直存在
}
}
value={[creditScoreStart,creditScoreEnd]}
onChange={(e)=>{
this.setState({
creditScoreStart:e[0],
creditScoreEnd:e[1]
})}}
marks={marks}
/>
api文檔上面tipProps屬性中沒有包含“visible”這個(gè)配置，但是源碼中是有這個(gè)配置的入口的别垮，所以加了“visible”是起作用的
ant mobile 的 ListView 組件加載一定數(shù)據(jù)后便监，點(diǎn)擊詳情返回回到之前的滾動(dòng)條的滾動(dòng)位置(onEndReached上滑到底部和頁面初始話的時(shí)候請(qǐng)求數(shù)據(jù)，可以定義一個(gè)公共的方法this.loadMore()獲取數(shù)據(jù))
react項(xiàng)目中在不使用npm run eject的情況下按需引入Antd以及l(fā)ess
安裝customize-cra，引入react-app-rewired插件：react-app-rewired的作用就是在不eject的情況下,覆蓋create-react-app的配置
npm install react-app-rewired customize-cra babel-plugin-import
npm install less less-loader
在根目錄下面新建config-overrides.js烧董，并修改相關(guān)配置
const { override, fixBabelImports,addLessLoader,addWebpackAlias } = require('customize-cra');
const path = require("path");
module.exports = override(
fixBabelImports("import", { //配置按需加載
libraryName: "antd-mobile",
libraryDirectory: "es",
style: true, //自動(dòng)打包相關(guān)的樣式 默認(rèn)為 style:'css'
}),
// 使用less-loader對(duì)源碼重的less的變量進(jìn)行重新制定毁靶，設(shè)置antd自定義主題
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
},
}),
//增加路徑別名的處理
addWebpackAlias({
'root': path.resolve('./src')
})
);
