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

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

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

<InputItem

    {...getFieldProps('account', {
    initialValue: '',
    rules: [{
     required: true,
     message: '请输入账号',
     }],
     })}
     clear
    ref={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.userAgent
        var 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}>
                <InputItem
                  value={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?<Carousel
          autoplay={isAutoplay}
          infinite
          style={{minHeight:'1.5rem'}}
        >
        
          {this.state.imgs.map(val => (
            <div
              key={val}
              onClick={this.bannerClick.bind(this,val)}
              style={{ display: 'inline-block', width: '100%'}}
            >
              <img
                src={val.pic}
                alt=""
                style={{ width: '100%', height: "1.5rem" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.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
    })
  }