ionic3踩坑体验(二)
ios滚动卡顿
<ion-content>
滚动在ios会卡住,当我在ios不使用-webkit-overflow-scrolling: touch
时不会卡住但滚动效果实在是太糟糕了。
ionViewDidLoad(){
if (this.platform.is('mobileweb') && this.platform.is('ios')) {
const scrollElement = this.content.getScrollElement();
scrollElement.scrollTo(0, 1);
this.content.ionScrollEnd.subscribe(evt => {
if ((this.content.contentHeight + 1) < scrollElement.scrollHeight) {
if (scrollElement.scrollTop === 0) {
scrollElement.scrollTo(0, 1);
}
else if ((scrollElement.scrollTop + this.content.contentHeight) === scrollElement.scrollHeight) {
scrollElement.scrollTo(0, (scrollElement.scrollTop - 1));
}
}
});
}
}
用上面的方法可以解决一些问题,不过,如果你的页面内容是组件加载后获取,应该在内容获取后在使用这个方法。
这个问题在GitHub上的讨论
echars在ionic上的使用
首先我们安装 typings 库,以及 ECharts:
npm install typings echarts --global
然后,安装 ECharts 的 TypeScript 定义文件,这个文件来自社区贡献。
npm install @types/echarts --save
现在,我们可以在 TypeScript 文件中访问 ECharts 库了:
import * as echarts from 'echarts';
具体使用方法可以看这个教程
我主要想说的不是echarts的使用,而是使用后出现的问题
在使用echarts后,打包成ios app(使用 pwa 也会有这个问题))后下拉图形(按住tooltip)出现闪屏的情况,只需要在echarts的option中添加 showDelay: 200 即可
tooltip: {
trigger: 'axis',
// formatter: function (params,ticket,callback) {
// console.log(params)
// var res = '<div (click)="show()">' + params[0].name;
// for (var i = 0, l = params.length; i < l; i++) {
// res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
// }
// res =res+'</div>'
// setTimeout(function (){
// // 仅为了模拟异步回调
// callback(ticket, res);
// }, 1000)
// return 'loading';
// },
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
showDelay: 200 //防止抖动
},
legend: {
data: ['星期一','星期二']
},
xAxis: [
{
type: 'category',
data: xdata,
axisPointer: { type: 'shadow' },
axisLabel: { interval:0,rotate:40 },
}
],
yAxis: [
{
type: 'value',
name: yname,
axisLabel: { formatter: '{value}' },
splitLine:{ show: false }
}
],
series: series
}
点击
ios端点击事件有300ms左右延迟,需在有click事件的地方加上 tappable 属性。
<div tappable (click)="myClick()">点击事件</div>
也可以使用 fastclick
import * as FastClick from 'fastclick'
FastClick['attach'](document.body);
还有当我们使用大屏设备比如iPad pro时,手指斜着点过去,可能会用轻微位移,我们可能需要兼容这种问题,可以使用touch事件,在我们的项目中,我写了一个指令去代替click事件实现兼容,有空单独介绍。
input输入框
这点不是关于ionic,而是ios的。
为了提高用户体验,点击输入款修改输入时,我们应当自动全选内容(拖蓝)。
拖蓝(全选)
- 最简单的是直接调用input.select()(HTMLInputElement.select());
- 当输入框已经获得焦点的时候(当然),可以使用document.execCommand('SelectAll')来全选输入框中的所有内容(The selectAll command)。
但是只有
targetElement.type === 'text' ||
targetElement.type === 'search' ||
targetElement.type === 'password' ||
targetElement.type === 'url' ||
targetElement.type === 'tel'
可以使用setSelectionRange
不过,对于pc可以使用<input type='number' onfocus='this.select()'/>
直接实现
在ios设备没有作用 使用onfocus='this.select();
this.setSelectionRange(0,this.value.length)'
有效果但在pc上会有错误。
最后用如下方法实现ios和pc端都能实现:
<input type="number" onfocus="selected()"/>
<input type="number" (focus)="selected()"/>
<ion-input type="text" (ionFocus)="selected()"></ion-input>
selected() {
try {
setTimeout(()=>{
document.execCommand('SelectAll');
});
} catch (err) {
console.log(err);
}
}
其他
position:fixed
有时在ios上也会出现问题,写代码时不光看用chrome调试工具模拟的页面效果, 一定要在真机上调试。
随着功能模块越来越多,项目越来越大,我们可能需要懒加载,但在使用懒加载后我们的pwa版本在项目启动后断网,再连接网络没有办法加载断网前还未加载的模块。这个原因我们不得不改回原来的版本,我们的项目主要使用pwa版本,就目前来说启动速度还可以。