react開發移動端H5遇到的問題(1)

呆呆_呆呆發表於2018-12-11
ReactH5
1，視訊播放
這裡的是視訊播放使用的是html5的vedio標籤，移動端控制元件操作時會有一些問題，全屏操作導致頁面卡死，
這邊我是採用迴避法：
嘿嘿
下面說說關閉控價裡面的區域性功能的寫法：
controlsList='nofullscreen'
比如禁用掉下載功能：controlsList='nodownload '
<video
ref="video"
style={{display: this.state.videoBool ? 'block' : 'none'}}
className={styles.video}
controls
controlsList='nofullscreen'
src='https://s1.91quzou.com/static/video/guide/zqmj.mp4'
>
<source src={this.state.videoUrl} type="video/mp4"/>
<source src={this.state.videoUrl} type="video/ogg"/>
<source src={this.state.videoUrl} type="video/webm"/>
</video>
功能禁用掉之後會有灰色標籤，需要隱藏樣式 如下：
video::-webkit-media-controls-fullscreen-button {
display: none;
}
複製程式碼
2，圖片載入的時候要注意圖片的快取，這個和預設圖片是不一樣的性質，當切換分頁和篩選欄位的時候 為了避免新的篩選對應舊的圖片，可以使用每次請求之前清空上次的篩選內容 這個時候再設定預設圖片即可，
3，分頁，很多時候監聽分頁請求的時候 ，遇到臨界值可能會有重複的資料，這個時候需要介面標誌位
window.onscroll = () => {
const {currentPage, hasMore,xhrFlag} = this.state;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let currentPage1 = currentPage;
if (xhrFlag &&scrollTop>=(scrollHeight-clientHeight)) {
if (hasMore) {
currentPage1 += 1;
this.paramsInfo.currentPage = currentPage1;
this.getGoodsThemeData()
}
}
}

複製程式碼
4，定位要慎用，特別是有滾動分頁的情況下 ，定位會影響文件流的佈局.
5,很多時候改變了state的值 但是再請求介面 發現引數還是修改之前的引數 可以使用回撥來請求 如下：
this.setState({
filterValue: e,
operateId:e,
pageSize:10,
currentPage:1,
},() => {this.getSearchData(false)});

複製程式碼
6,一個標籤多個樣式的寫法
<div  className={`${styles.text_desc} ${styles.text_desc_active}`}>發起售後申請</div>
複製程式碼
7,input框虛擬鍵盤的喚起
onVirtualKeyboardConfirm = (e) => {
const keycode = e.keyCode;
if (keycode === 13) {
e.preventDefault();
if (this.state.goodsKeywords) {
this.getSearchData(false);
document.getElementById("SerachInput").blur();
this.setState({
show: false,
pageSize:10,
currentPage:1,
})
} else {
Toast.info(`請輸入內容`, 2, null, false);
}
}
};
<form action="javascript:;">
<input placeholder="搜尋商品名稱或貼上寶貝標題"
onChange={onChangeValue}
className={styles.input_s}
value={inputValue}
onFocus={onFocus}
autocomplete="off"
// autofocus="autofocus"
onBlur={onBlur}
id="SerachInput"
type='search'
onKeyUp={onVirtualKeyboardConfirm}
/>
</form>
1），type=search 可以讓android手機的換行鍵變成搜尋 但是不可以是iphone手機的換行變成搜尋，所以需要form表單
包裹一下 ，注意這裡的form表單需要action,但是這裡又不是formdata提交方式所以 要禁掉action操作
2），監聽手機的search鍵，並且呼叫搜尋介面，這個時候可以用onKeyUp方法 監聽手機鍵盤按下的程式碼，如果13就是
搜尋鍵 然後=呼叫方法
3），手機鍵盤的自動吊起是使用聚焦事件
4），關閉input框的聯想和歷史輸入記錄 autocomplete="off"
複製程式碼
8,滑鼠滾動事件 採用window.onscroll這樣方法寫的 並且在生命週期裡面呼叫的 需要在componentWillUnmount裡面置空下滾動事件，否則到了別的頁面還會有這個事件的
9,路徑引數的獲取
GetUrlParams = (paraName) => {
const arrOld = this.props.match.params.id.split('&');
if (arrOld.length > 0) {
let arr;
for (let i = 0; i < arrOld.length; i++) {
arr = arrOld[i].split("=");
if (arr != null && arr[0] === paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
};
呼叫就直接傳遞引數即可：如
const cid = this.GetUrlParams('cid');
const goodsId = this.GetUrlParams('goodsId');
const csource = this.GetUrlParams('csource');
複製程式碼

相關文章