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版本，就目前来说启动速度还可以。

来源：https://www.cnblogs.com/stardee/p/9919560.html

标签

ios

fastclick