【技巧】ionic3的小彩蛋

ionic里面有不少彩蛋——就是官網沒有說明,但是可以用的,因為一段時間沒用ionic做項目,所以一時想不起來,先列幾個:

一、眾所周知的

軟鍵盤出現搜索按鈕

form標簽包含ion-searchbar即可。

解決非交互組件的點擊延時

這類組件也是可以響應點擊事件的,只是因為要判斷是否有后續響應(如判斷是否雙擊),會有幾百ms的延時,這時加上tappable即可

關閉ios的webview下拉回彈

在config.xml添加配置:

<preference name="WebViewBounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

二、較為隱藏的

輸入框內容支持復制黏貼

ion-input包含在ion-item里面即可,而且如果不包,在ios可能還會出現問題。

組件使用某平臺樣式

一般我們在config里面的mode設置了平臺后,主題風格就會是該平臺,當我們某個組件想選用另一平臺的樣式時,它有mode屬性時很容易實現,當沒有的時候呢?其實,我們只要取現有樣式名,換掉后綴,并添加即可,如ios平臺ion-checkbox會生成checkbox-ios樣式,一般只需給該控件加上checkbox-md類名即可變成android風格,因為它一般會覆蓋原來的平臺的樣式(會存在風險,未必會百分百成功,慎用!!更合理的是移除原來平臺類名,再添加新平臺類名)。

<ion-checkbox class="checkbox-md"></ion-checkbox>

還有更“傷心病狂”的在ts中用:

const actionSheet = this.actionSheetCtrl.create({
      title: '查詢結果',
      cssClass: 'action-sheet-md'
});

主動觸發下拉刷新

要在渲染后,不然refresher可能為未定義。

@ViewChild(Refresher) refresher: Refresher;
 ionViewDidLoad(){
    this.refresher._beginRefresh();
}

input相關組件的隱藏事件

像ion-searchbar、ion-input、ion-textarea等,都是有ionBlur、ionFocus、ionChange三個事件的,只是官方文檔沒有寫……

textarea指定行數

使用官方的ion-textarea時,使用rows屬性指令,如:

<ion-textarea placeholder="說點什么吧" rows="6"></ion-textarea>

web版獲取外部請求傳遞參數

const url: string = window.location.search;

……
想到再補充,或者大家知道的,麻煩也說一下。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容