各位觀眾老爺大家好,歡迎收看內(nèi)褲總動員之程序猿的IT程序大講堂,今天給大家根據(jù)上次的分享內(nèi)容赴涵，ionic中輸入欄的使用方法和輪播圖逐虚。
首先看一下關(guān)于ionic中文文檔中的輸入框的一種毫胜。
這個是ionic中文官網(wǎng)负蚊，點擊CSS文檔中袍辞，我們首先用一下這個表單中的這個嵌入式表單贸宏。
直接復(fù)制其中代碼到我們的文件中造寝， 我起了一個名字叫home的html文件中。
然后我在其中加入了一個img圖片诫龙，然后button標(biāo)簽中的類名中，我也加入一個按鈕圖片线脚。
然后左邊的圖片赐稽，外面的div有一個名字就是home_head_people，然后我創(chuàng)建了一個css文件浑侥，加入樣式姊舵。
這個就是嵌入式表單寓落。 前面的圓圖片原來就是加入一個img標(biāo)簽括丁，而后面的搜索圖標(biāo)是直接的一個類名。在ionic圖標(biāo)庫中找到的伶选。 在中文網(wǎng)中有ionic圖庫的名字史飞。
? 現(xiàn)在就給大家說一下，關(guān)于ionic輪播圖的使用方法仰税。
點擊ionic构资。js文檔區(qū)域，找到滑動框陨簇，然后復(fù)制代碼吐绵。
? ? 復(fù)制到home文件中，下面有各個APP解釋。先不說這個啊己单“η裕看看我的home文件的情況。
代碼過來后纹笼，我在中間加入了3個img標(biāo)簽圖片纹份，然后在ion-slide-box 后加入 屬性：
auto-play ="true" ? 自動滾動
slide-interval="1000" ?1000毫秒滾動
does-continue ? 循環(huán)滾動
show-pager ?是否顯示輪播下面的那個按鈕點點
官網(wǎng)解釋的有點出入，媽蛋廷痘，我試了之后才知道蔓涧。。牍疏。蠢笋。
但是，這種方式不太方便鳞陨，而且以后也不會這樣寫的昨寞，我們有一個東西，就是angular.js 這里面在菜鳥教程中有一個 循環(huán)方式特別方便厦滤。
在這里面援岩，我如果詳細(xì)的去解釋里面的東西就太多了。
我就簡單的說一下掏导， ? x in ?records ? ?有點像我哦們 js中的 那個forin 循環(huán)
便利我們js數(shù)組里面的數(shù)據(jù)享怀。
而我們的數(shù)據(jù)存放的方式 在angular里面 除了數(shù)組就是對象的方式。
而我的存放方式為
這個數(shù)據(jù)我們寫在了controlers 控制器中趟咆，如果你們看到我的第一章的話添瓷，你們應(yīng)該知道，這個控制器和我們的這個home值纱。html的連接方式啊鳞贷。? 最主要的路徑控制app.js路徑里面。 我通過app.js 路徑控制? 然后就導(dǎo)入到了我們這個controlers虐唠。js文件中搀愧。 ?數(shù)據(jù)就這樣的存放下來了。
接下來我們在看一下home.html 是如何使用的疆偿。
這里呢咱筛，有點跟我們的菜鳥教程中的案例有點一樣了。 ?使用 ?ng-repat 方式 進行訪問便利 ?我們的imgs的數(shù)據(jù)名稱杆故。 ? 然后 下面的img的訪問數(shù)據(jù)的方式就是x.imgsrc 了 ? ? 請看一下我的保存數(shù)據(jù)和這個訪問方式就哦了迅箩。
好了，關(guān)于輪播圖的使用方式就簡單的為大家介紹到這里了啊处铛，如有問題可以踴躍的聯(lián)系我哦沙热。
我會激情滿滿的告訴你的叉钥。 撒有哪啦~~~~~~~~~~~~~~~~~
