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})}

antd mobile在微信公众号开发中使用笔记相关推荐

微信公众号开发中的一些设置和遇到的问题
1.微信公众号开发人员设置 2.回调地址域名配置正式账号: 测试账号: 可能遇到的问题: 3.设置ip白名单利用php向微信发送请求获取openid的时候,打印显示没有返回在网上查了一些资料,基 ...
微信公众号开发中遇到的问题——支付（二）
第一次开发微信公众号,也是第一次接触微信公众号的支付,我使用的是jssdk,用h5页面调用的支付,后台使用的是java.首先声明,我不是一个愤世嫉俗的人,也不喜欢吐槽,我认为别人提供接口就已经很不错了 ...
微信公众号开发中，获取用户资料的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 微信公众号的开发主要是在服务号环境下进行,订阅号是拿不到用户的资料的,因此,下文的讨论都基于微信服务号. 微信公众号的两个ac ...
微信公众号开发中分享功能分享微信朋友圈/微信好友
微信公众号中经常遇到的问题就是分享链接到微信朋友圈微信好友一类的需求. 下边走一下需要操作的流程 1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信 ...
微信公众号开发中关于cookie的问题
最近在做的一个项目中使用到了微信公众号,在公众号中打开的页面中需要使用到cookie,这样方便两个页面之间的传值,但是发现页面跳转时候cookie已经过期.百思不得其解,浏览器中测试正常的,到了微信中 ...
Java 微信公众号开发_学习笔记
一.课程介绍本套课程的学习内容,开发语言微信公众号介绍,申请以及后台设置详解编辑模式下的消息回复,菜单建立,素材管理等开发前的环境搭建以及工具准备开发者模式的切换.以及消息的接收与响应百度 ...
微信开发者和其他服务器区别,求教微信公众号开发中两种认证技术的区别？
本人对微信开发中2个认证方式有些不解,求各位大佬给解释一番. 众所周知,在微信开发者进行开发时,有两个角色和两个场景存在,我分别描述如下: 第一个场景:微信服务器------>我的服务器. 在我 ...
关于微信公众号开发中扫码关注和关注之后继续扫码的不同点
2019独角兽企业重金招聘Python工程师标准>>> 开发微信商城,当遇到需要绑定上下级关系的时候,会通过扫码的方式关注公众号,但是如果不想做这个人的下级,后台添加解绑功能,继续扫 ...
微信公众号开发中，安卓和IOS系统兼容问题（后续整理...）
移动端开发中,需要考虑安卓系统和IOS系统的兼容问题. IOS系统对于某些样式会有自己的样式设置.对于开发很不利,需要将其 . 1.select在IOS中会存在阴影. /*解决移动端iOS下兼容问题* ...

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

antd mobile在微信公众号开发中使用笔记相关推荐

最新文章

热门文章