ionic3踩坑体验（二）

---

title: ionic3踩坑体验（二）
date: 2018-03-15 21:34:13
tags: ionic
---

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

关于setSelectionRange

其余

position：fixed 有时在ios上也会出现问题，写代码时不光看用chrome调试工具模拟的页面效果， 必定要在真机上调试。

随着功能模块愈来愈多，项目愈来愈大，咱们可能须要懒加载，但在使用懒加载后咱们的pwa版本在项目启动后断网，再链接网络没有办法加载断网前还未加载的模块。这个缘由咱们不得不改回原来的版本，咱们的项目主要使用pwa版本，就目前来讲启动速度还能够。