antd mobile在微信公众号开发中使用笔记

问题1、InputItem 文本输入组件在IOS中多次点击才可以获取焦点

解决：添加点击事件手动触发focus事件

<InputItem{...getFieldProps('account', {initialValue: '',rules: [{required: true,message: '请输入账号',}],})}clearref={el => this.inputRef1 = el}onFocus={this.handleFocus}error={!!getFieldError('account')}onErrorClick={() => {const err = getFieldError('account').join('、');Toast.info(err, 1);}}onClick={() => { this.inputRef1.focus() }}placeholder='账号'onBlur={this.handleScroll}><Icon type="user" />
</InputItem>

问题2、IOS软键盘收起，页面被顶起，不回退

解决：失去焦点时触发onBlur方法：

 handleScroll = (e) => {// var u = navigator.userAgent// var isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1//安卓// var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)//ios// if(ios){//     window.scrollTo(0, 0);// } window.scrollTo(0, 0);}

问题3、安卓软键盘遮挡输入框

搜索方案：组件加载完添加resize事件，input获取焦点时触发事件：

 componentDidMount() {window.addEventListener('resize', function () {if (this.state.bScroll) {this.state.bScroll.refresh();}if (document.activeElement.tagName === 'INPUT' ||document.activeElement.tagName === 'TEXTAREA' ||document.activeElement.getAttribute('contenteditable') == 'true') {window.setTimeout(function () {if ('scrollIntoView' in document.activeElement) {document.activeElement.scrollIntoView();} else {document.activeElement.scrollIntoViewIfNeeded();}}, 0);}})}handleFocus = (e) => {var u = navigator.userAgentvar isAnd = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1//安卓var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)//ios//console.log(isAnd,ios)if (isAnd) {// if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {//     window.setTimeout(function () {//         document.activeElement.scrollIntoViewIfNeeded();//     }, 0);// }setTimeout(function () {document.activeElement.scrollIntoViewIfNeeded();document.activeElement.scrollIntoView();}, 500);}}

另类解决：安卓时给元素添加动画，缩小间距来展露input框

问题4、SearchBar 搜索栏组件IOS多次点击才能获取焦点，但是没有onClick事件，所以放弃，用inputItem组件代替，同时inputItem必须放在list组件中才有效

<List className={styles.search_input}><InputItemvalue={this.state.pages.pgname}placeholder="搜索从这里开始"onChange={this.valueChange}ref={el => this.autoFocusInst = el}onClick={() => { this.autoFocusInst.focus() }}// onBlur={this.submit}// onVirtualKeyboardConfirm={this.submit}><Icon type="search" /></InputItem>{/*<div className={styles.cancel_btn} onClick={this.submit}><Icon type="search" /></div>*/}</List>

问题5、Carousel 走马灯首次加载不自动轮播，手动触发一次才开启自动轮播

解决：设置state值，请求完数据更改，更新更改autoplay的值

 {this.state.imgs.length>0?<Carouselautoplay={isAutoplay}infinitestyle={
   {minHeight:'1.5rem'}}>{this.state.imgs.map(val => (<divkey={val}onClick={this.bannerClick.bind(this,val)}style={
   { display: 'inline-block', width: '100%'}}><imgsrc={val.pic}alt=""style={
   { width: '100%', height: "1.5rem" }}onLoad={() => {// fire window resize event to change heightwindow.dispatchEvent(new Event('resize'));}}/></div>))}</Carousel>:null}

 componentDidMount() {const { dispatch } = this.props;dispatch({type: 'home/fetchHomeData',callback: (res) => {console.log(res)this.setState({imgs: res.data.bannerPic,isAutoplay:true})}});
}componentDidUpdate(){this.setState({isAutoplay:true})}