❶ ionic2 tab頁面刷新問題
ionic2頁面堆疊(個人理解)導致頁面只請求一次,需求需要每打開一次頁面請求一次,網路半天找不出相似的方法。
最後找到了一個大神的記錄,在此借用一下。
(不會變表格。。。)
ionViewDidLoad 頁面載入完畢觸發。該事件發生在頁面被創建成 DOM 的時候,且僅僅執行一次。如果頁面被緩存(Ionic默認是緩存的)就不會再次觸發該事件。該事件中可以放置初始化頁面的一些事件。
ionViewWillEnter 即盯迅將進入一個頁面變成當前激活頁面的時候執行的事件。
ionViewDidEnter 進入了一個頁面且變成了當前的激活頁面,該事件不管是第一次進入還是緩存後進入都將執行。
ionViewWillLeave 將要離開了該頁面之後變成了不是當前激活頁面的時候執凱改此行的事件。
ionViewDidLeave 在頁面完成了離開該頁面並變成了不是當前激活頁面的時候執行的事件。
ionViewWillUnload 在頁面銷毀和頁面中有元素移除之前執行的事件。
ionViewDidUnload 在頁面銷毀和頁面中有元素移除之後執行的事件
在殲螞這里ionViewWillEnter和ionViewDidEnter都會在進入頁面時執行,但是ionViewWillEnter會先執行。已修改工程,暫時未見什麼問題。
ionViewWillEnter同時適用於 this.nav.Ctrl.push()跳轉,自動生成的返回按鈕點擊返回親測有效。this.app.getRootNav().push()無效。
解決一大難題啊!哈哈~
剛記完筆記回去,頁面就報錯了(啪啪啪打臉)。ionViewWillEnter和ionViewDidEnter同時用會報錯去掉一個就行,will,did這是一個問題。。。。
❷ Vue+Ionic4,知虎偏行(二)創建及配置項目
一般Ionic項目創建可以使用ionic-cli命令,即:
然而查看該命令說明和源碼是沒有Vue的項目模版的(見 STARTER_TEMPLATES中的projectType )。
所以使用Vue來創建項目:
這是Vue很基礎的東西,安裝依賴並運行看下:
此時可以看到項目能正常運行的,一般來說,應用都需要和路由打交道,所以添加下路由:
對Ionic集成,安裝ionic相關依賴(其中@ionic/core是組件部分,@ionic/vue是封裝成Vue方式調用的介面部和逗分):
安裝完成後,在main.js中添加配置:
再次運行,發現命令行會有告警提示:
同時頁面也會報錯,顯示空白頁面,這是一個BUG(前期的版本是沒有這個BUG的),我們需要安裝ionicons,而且它對版本有要求,要在V4.5.10以下,所以執行:
此時再次運行,沒有告警也沒有錯誤提示,但是還是空白頁面,調試頁面發現有這樣一個樣式:
我也不知道這是幹嘛用的,改了喚山賣再說:
此時頁面看到有東西了, 那我們嘗試下ionic的組件能不能用 ,在Home.vue頁面添加一個按鈕:
可以看到唯巧組件渲染出來了,為了和ionic的dom結構保持一致,把App.vue稍微改動一下,變為如下:
我們再試試看事件能不能響應,頁面稍微改一下:
運行,發現能正常使用的。
為了支持Ionic的路由和使用其動畫和樣式,@ionic/vue里在vue-router的基礎上做了封裝,所以處理一下,打開router.js,修改一下(把Router替換為IonicVueRouter即可):
此時看到路由也是正常使用的。
眾所周知,Ionic默認是使用android/md(Material Design)模式的,如果想使用ios模式,在<html>上添加mode="ios",即:
index.html添加meta項:
至此,基本項目配置就完成了,後續再談論更多細節。
❸ fitbit ionic如何申請退款
找客服申請提款。
方法如下:
1、打開手機的設置界面,點擊賬戶名稱處。
2、點擊iTunesStore與AppStore。
3、在iTunesStore與AppStore頁面,點擊賬號。
4、點擊查看賬戶。
5、在賬戶設置頁面,向下拖動頁面,點擊購買記錄。
6、在購買記錄頁面,找到並點擊需要退款的APP。
7、在訂單頁面,記錄下訂單森早行號,然後撥打400客服電話,按語音提示此嘩睜褲轉人工服務,向其說明APP付費需要退款的情況,並告知訂單號。如果是由於誤操作,人工客服一般會幫助登記退款。
❹ ionic使用tabsHideOnSubPages偶爾會無效
在 ion-tabs 設置了 tabsHideOnSubPages 的情況下,在子頁面刷新後偶爾會再次顯示tabs。
查看源碼得知,ionic判斷子頁面的邏輯是:在路由歷史中,當前頁面的index大於0則為子頁面。
如果子頁面的 @IonicPage 中沒有設置臘宴 defaultHistory ,ionic將會判斷此頁面的index為0,就會出現刷新子頁面後再次顯示tabs的問題。
一般情況下子頁面是要設置 defaultHistory 的,但是 defaultHistory 目前不支持傳遞參數,所以在某些情況下,可能子頁面不設置 defaultHistory。
下面提供兩種解決方法:
將子頁面的 defaultHistory 設置為主頁(輪高銀home),或者是當前tab的根頁面(在 ion-tab 設置的 root)。
如果子頁面可能在不同的tab中被打開,無法確定其根頁面的情況下,這時我們修改ionic判斷子頁面的邏輯即可。
判斷當前頁面是否為根頁面,非根頁面則隱藏tabs。
找到上面的源碼,可以通過搜索 isTabSubPage 來定位。( 修改ionic源碼修復問題 )
目前使用的是方案二+方案一,較符合項念拍目需求,暫未發現問題。
❺ 組件介紹
組件介紹
1、打開ionic官網 https://ionicframework.com/
2、點開components,裡面會出現原有的組件(以後項目開發過程中還會自定義組件)
3、介紹部分組件(Grid、Modals、Badges、FABs、Segment)
--grid:柵欄布局
--modals:彈窗
--badges:卡片
--FABs:比較新穎的快速導航
--segment:選項卡(導航)
下面是簡單介紹幾個組件,在最後我會詳細講解一個組件的使用
Grid
網格系統由12列組嘩山余成,每個ion-col都可以通過設置col-width屬性來確定大小。
基本用法:
This column will take 12 columns
This column will take 6 columns
Modals
模式在關閉屏幕上滑動以唯宏顯示臨時UI,通常用於登錄或注冊頁面,消息組合和選項選擇。
註:一般做成彈窗。
基本用法:
import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';
export class MyPage {
constructor(public modalCtrl: ModalController) {
}
presentModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
}
Badges
Badges是通常向用戶傳達數值的小組件。它們通常用在一個項目中。
基本用法:
Followers
260k
也可以給出任何顏色屬性:
FABs
FAB(浮動動作按鈕)是標准材料設計組件。它們被塑造成一個代表一個促進行動的圓圈。按下時,可能會包含更多的相關動作。FABs的名字表示在固定位置上浮動內容。
基本用法:
Ionic Component Documentation
Segment
Segment是一組按鈕顯示的行。它們可以作為過濾器,根據段值顯示/隱藏元素。
註:類似導航。
基本用法:
Ionic Component Documentation
詳細講解Segment
1、打開ionic官網:https://ionicframework.com/
2、點開Explore the docs,進到文檔
3、點開components,裡面找到Segment組件,點擊Demo Source進到github上的源碼
4、點開pages.ts,將缺少的可以自己拷貝到自己的某個頁面ts中。
(1)首先這里import指的是導入ionic庫中的某個類庫,如果同屬於一個ionic庫這個時候可以放在一起,格式比如:import { NavController,AlertController,Platform,ModalController } from 'ionic-angular';
(2)然後是在class中先聲明,比如這里的
pet: string = "puppies";
isAndroid: boolean = false;
constructor小括弧中放的是將類庫初始化,自己命名,花括弧中進行函數等的調用。
5、最後在template.html中自己缺失的部分亂滾拷貝到自己的html中。
Puppies
Kittens
Ducklings
1、這里[(ngModel)]="pet"指的是ts頁面中初始化的值,也就是剛進入到頁面的是哪個選項;
2、 ion-segment-button value="puppies",這里的value值對應下面的頁面,因為每個選項都是對應不同的頁面的,這里通過value值來綁定。
...
...
...
...
...
...
這里[ngSwitch]="pet"對應的是上面的導航的初始化頁面;
ion-list*ngSwitchCase="'cklings'" 中的*ngSwitchCase分別對應導航每個導航的value值.
問題:
1、ionic3對於資源的管理必須放在assets文件夾中,其他地方不能識別;
2、在ts文件中寫函數,需要調用庫中的類庫時,在constructor初始化時必須加上類型(public、private等)
❻ 怎麼解決ionic配的路由cache和history出現的
電腦連接上WiFi出現黃色感嘆號,代表電腦連接上無線路由器卻無法上網。
可能的原因有:
1、WiFi本身問題,可能WiFi未正常連接,導致無法上網。
2、路由器問題,可能路由器過熱或者損壞。
3、可能鋒察殲寬頻欠費,導致無法上網。
4、WiFi名字包含中文,導致部分電腦無法連接上網。
5、電腦系統問題,可能系統出現了問題,導致連接上了WiFi卻無法上網。
建議解決辦法:
1、使用其他手機或設備連接WiFi試試能否上網,排除WiFi本身問題。
2、銀沖重啟一下路由器試試,或者將路由器恢復一下出廠設置,然後重新撥號上網,並根據設置向導重新設置WiFi,或者更換新路由器再進行撥號連接上網。
3、聯系一下寬頻客服,確認寬頻賬號是否有異常,如欠費,充值一下寬頻,然後再撥號連接試試。
4、如WiFi名字包含中文,建議修改為英文或者英文加數字的組合再進行連接。
5、如以上原因都排除,那麼久很沒睜有可能是電腦系統問題了,建議恢復一下出廠設置。看看能否解決問題。
❼ 如何利用ionic框架設置Tabs標簽頁
第一步,創建靜態頁面tabs.html,默認是HTML5模板,如下圖所示:
第二步,引入ionic相關的CSS文件和JS文件,如下圖納兆舉所示:
第三步,在body插入div和a標簽元素,並設置樣式,如下圖所示:
第四步,預覽該靜態頁面,這時會看到四個猜梁Tabs標簽,如下圖所示:
第五步,再次設置Tabs樣式,使每個Tabs樣式不一樣,如下圖所示:
第六洞碧步,下面插入AngularJS相關的指令,ng-app、ng-controlle指令,如下圖所示:
❽ ionic如何連接網路
安裝插件:
$ cordova plugin rm org.apache.cordova.core.network-information
Connection對象提供對設備的蜂窩及WiFi連接信息的訪蠢讓問。
通過navigator.network介面訪問該對象。
屬性:坦派
connection.type
connection.UNKNOWN
connection.ETHERNET
connection.WIFI
connection.CELL_2G
connection.CELL_3G
connection.CELL_4G
connection.NONE
常量帶信局:
❾ ionic項目 頁面有時不能上下滑動
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="陵派虛ionic.min.css">
</head>
<body>
<div class="tabs tabs-top tabs-stable">
<a class="tab-item">要聞</a>
<a class="tab-item active">河南</a>
<a class="tab-item">房產</a>
<a class="tab-item">財經</a>
<a class="tab-item">娛樂</a>
</div>
<div class="content stable-bg">
</div>
<div class="tabs tabs-stable tabs-icon-top">
<a class="tab-item active">
<i class="icon ion-ios-paper-outline"><羨昌/i>新聞
</a>
<a class="tab-item">
<i class="icon ion-ios-book-outline"></尺燃i>訂閱
</a>
<a class="tab-item">
<i class="icon ion-images"></i>圖片
</a>
<a class="tab-item">
<i class="icon ion-ios-videocam-outline"></i>視頻
</a>
</div>
</body>
</html>
