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版本，就目前來講啓動速度還能夠。