2-4 【接口Interface Flex佈局】讓頂部導航滾動

 


能夠把複雜的類型作命名。例如接口中沒有定義年齡，在定義person的時候 若是寫了age那麼就會報錯。由於咱們接口中並無定義年齡。

可選屬性，只讀屬性

新的佈局方式





下面這裏menu設置類型爲TopMenu的接口，那麼後面的熱門、男裝、手機 就報錯了。

輸入了title屬性後，還缺乏link的屬性。



想讓link屬性可選。link屬性後面加問號就能夠了。


設置link屬性爲只讀的

由於link設置了爲只讀的，因此下面定義的test方法裏面給link屬性賦值就會報錯了。

接口的函數定義

參數都是number類型的。返回的類型也是number類型的


es6箭頭函數的寫法

至關於下面這種方式的簡寫，省略了大括號和return

只有一行內容能夠簡寫成這種寫法

 

接口-字典類型

定義索引的類型是字符類型，且索引值也是字符類型。



定義字典類型的時候，若是複製了數字1 那麼就會報錯了。由於規定的是string類型的

改爲string類型就沒問題了



輸出a的值看一下


前端須要改一下


把test改爲constructor構造函數

默認輸出了字典的值


這裏爲何有綠線呢？

實際上是能夠直接用點的形式，這種寫法



把josn的數據 複製過來。




咱們但願菜單是不折行，在上面滾動的。外層用flex佈局



按照行佈局



每一個item折行了。






column佈局

row-reverse

倒着排列。人們拍在了最後。



豎着，倒着



默認就是橫向的 ，不須要加

每一個item折行的問題

避免折行的屬性。


在手機上看的話，這裏行下面就會有個滾動條出現。

這個滾動臺實際上，咱們是不須要的

這樣他在真機上就沒有滾動條了，在瀏覽器管是看不出來的

真機調試

‘

結束