? ? ?各位觀眾老爺大家好,歡迎收看內(nèi)褲總動員之程序猿的IT程序大講堂,書接上文，這次給大家來分享的是關(guān)于ionic中CSS文檔當(dāng)中的側(cè)邊欄使用方法和布局。

? ?首先先給大家看一下效果。

側(cè)邊欄

這個效果我們已經(jīng)可以看到了，使用方法我們還是老樣子，去ionic中文官網(wǎng)去查看js文檔。

ionic中文官網(wǎng)

在這里呢我們看到html標(biāo)簽和js代碼的使用方法。

那么首先我們先把html標(biāo)簽代碼復(fù)制過來，放在我們的index.html的文件上。

index。html文件的寫法

我們的html代碼復(fù)制到index后，我們現(xiàn)在需要寫一下js的代碼，看看js是如何通過滑動進(jìn)行側(cè)邊欄的打開的。

而js代碼，我們需要在controller。js文件中去寫入。 而我的首頁所對應(yīng)的controller 控制器的位置在這里。

controller。js文件

我們js文件寫完之后，我們的側(cè)邊欄就可以動了。

我在這里還加了一個功能，就是通過點擊我們左上角的頭像，然后側(cè)邊欄也能夠打開。

我們在對應(yīng)的home。html文件里面 ?寫一個點擊事件

側(cè)邊欄點擊事件

這樣我們的側(cè)邊欄就可以點擊打開了。

而左邊的側(cè)邊欄的布局方法。 我用的 row ?和col 百分比例寫的。

下面的圖片加文字使用list列表

list列表

這樣關(guān)于列表我的html代碼復(fù)制過去更改一下樣式就哦了。

效果就是這樣啦。

效果

好啦，關(guān)于側(cè)邊欄的使用方法就簡單的給大家介紹到這里啦，如有什么問題可以留言哦，謝謝大家，祝大家新年快樂~~~~