Taro-ui开发的坑

本文最后更新于:2 年前

记录使用Taro-UI开发的一些问题

搜索框问题

补充:这个搜索框问题是事后很久才补的,修修改改不知道是不是正确做法了,但是就是这么个思路。

使用<input>原生开发

1
<input type="search"/>

但是需求想把手机软键盘右下角换成搜索按钮,安卓上述方法可以实现,但是ios实现 ‘换行’ 变 ‘搜索’

1
2
3
<form action="javascript:return true">
<input type="search" placeholder="请输入">
</form>

补充:ios真的是麻烦得飞起

1
2
3
4
5
6
7
8
9
10
11
12
<!--'换行'变'前往'-->
<form action="javascript:return true">
<input type="text" placeholder="请输入">
</form>

<!--直接唤醒数字九键键盘-->
<input type="text" pattern="[0-9]*" placeholder="请输入数字">

<!--显示26键数字键盘,带有标点符号-->
<form action="javascript:return true">
<input type="number" placeholder="请输入数字2">
</form>

另外移动端H5开发软键盘的坑

使用组件AtSearchBar

1
2
3
4
5
<AtSearchBar
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>

套上了组件你以为可以了?不不不不

1
2
3
4
5
6
7
<Atform onSubmit={this.onActionClick.bind(this)}>
<AtSearchBar
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>
</Atform>

这样子软键盘上的搜索按钮就能起作用了

那ios软键盘还有一个完成按钮怎么触发呢?

1
2
3
4
5
6
7
8
<Atform onSubmit={this.onActionClick.bind(this)}>
<AtSearchBar
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
onBlur={this.onActionClick.bind(this)}
/>
</Atform>

采用失去焦点即搜索的办法即可

置底输入框问题

需求是想要一个置底(position:absolute;)的输入框,但是在ios里面点击输入框后,软键盘会完全遮挡输入框。

经过分析,是因为在安卓手机打开软键盘后,页面高度和显示高度取的是屏幕高度 - 软键盘高度,即大约原来一半

但是在ios手机上,此时页面高度还是屏幕高度,但是显示的区域只有原来一半,这时候taro的壳会自动出现滚动条,而且我们无法进行手动滚动

(啊!我也不知道怎么描述/不懂具体原因啊,反正就是不能实现手动滚动

于是我针对ios手机进行高度的特殊处理,将页面高度与显示区域进行同步,实现手动滚动

首先是判断手机类型,默认是安卓,防止意外情况。

1
2
3
4
5
6
7
8
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let type;
if(!isAndroid && isIOS){
type = "ios";
}else type = "android";
this.setState({phoneType:type});

然后监听输入框的获得焦点事件,触发下列行为

1
2
3
4
5
6
7
8
9
setTimeout(function () {
//ios高度特殊处理,-30px是为了页面样式
if(_this.state.phoneType == "ios"){
document.getElementsByClassName("taro_router")[0].style.minHeight = 'calc(50%-30px)';
document.getElementsByClassName("taro_router")[0].style.maxHeight = 'calc(50%-30px)';
}
//输入框滚动置底,底部与页面底部对齐
document.getElementsByClassName("item__footer")[0].scrollIntoViewIfNeeded(false);
}, 10);

记得失去焦点的时候进行恢复操作即可


Taro-ui开发的坑
https://www.chanx.tech/2020/10d80b8de18c/
作者
ischanx
发布于
2020年5月18日
更新于
2020年7月20日
许可协议