使用ionic開發移動端專案學習例項(1)

2021-07-16 21:31:13 字數 1521 閱讀 4714

angularjs學習例項

1.開啟git bash,輸入

git clone

cd chapter3

git checkout step1

本例項需要伺服器,所以先安裝node,開啟命令列,進入專案目錄,輸入:npm install,安裝成功,輸入node server

在瀏覽器中輸入上述**可以檢視專案,通過git checkout -f step2等切換專案,檢視不同的功能,這個例項可以切換到step10

step1效果:

step10效果:

ionic導航和核心元件

這個專案的重點是:

管理使用者狀態並實現應用內導航

用圖示、列表和卡片來組織內容

從外部載入資料並顯示載入效果

使用無線滾動來不斷載入資料

使用幻燈片展示組建來顯示應用介紹

使用方法:開啟git bash

不過好像step1沒什麼效果,切換到step2的效果圖:

這個例項有step7,切換到step7的介面如下

選項卡、高階列表和表單元件

專案要點:

使用選項卡元件並單獨儲存導航歷史

讓列表元素支援設定開關和重新排序

使用下拉重新整理來過載資料

使用移動端表單輸入框

專案使用跟之前差不多

切換到step2的效果圖

總共有step8,切換到step8的效果圖是

瀏覽器切換到手機介面,效果

移動端專案開發總結

對於這次移動端頁面開發,新接觸到的東西不少,首要的乙個就是響應式布局,在移動頁面開發中,需要考慮到移動端各種不同的螢幕大小而使用不同的布局來呈現出想要的效果.在小螢幕的移動裝置中.可能需要減少頁面中的資訊量,並且改變原有的布局方案,採用適用於移動端的布局方案.而在中等螢幕大小的移動裝置中,如平板,則...

移動端專案開發心得

通過這次專案開發,使我對布局有了更深層次的理解,對float和position的運用也更得心應手。體會到float和position對頁面的負面影響。其中,position absoulte fiexd會讓元素脫離文件流,其後面的元素 暫且稱為候補元素吧 會佔據原來的位置,需要對候補元素的margi...

ionic開發移動應用總結

本文不是ionic的教程,相關教程網上已經很多,本文主要是自己在採用ionic開發移動應用過程中的一些總結。某些應用資訊需要儲存在本地以便後面使用,最簡單的本地儲存是window.localstorage,我們可以將資料以鍵值對的形式進行儲存,如下 example localstorage.seti...