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');
