日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
從微信小程序到鴻蒙JS開發(fā)【04】-list組件

想了解更多內(nèi)容，請?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

1、可滾動(dòng)區(qū)域

在許多場景中，頁面會(huì)有一塊區(qū)域是可滾動(dòng)的，比如這樣一個(gè)簡單的每日新聞模塊：

上面的新聞?lì)愋褪且粔K可橫向滾動(dòng)的區(qū)域，下方新聞列表是一塊可豎向滾動(dòng)的區(qū)域。在微信小程序中，使用scroll-view組件即可實(shí)現(xiàn)。那么在鴻蒙js組件中，想要實(shí)現(xiàn)可滾動(dòng)的區(qū)域，則是使用list組件。list僅支持豎向滾動(dòng)，橫向滾動(dòng)要用tabs，將在下篇博客講解。

2、list + list-item

這里以本地新聞模塊為例，數(shù)據(jù)請求自天行數(shù)據(jù)接口(https://www.tianapi.com/apiview/154)。

上方為一個(gè)搜索框，下方是新聞列表。搜索框給了固定高度，那么怎樣讓新聞列表能夠占滿屏幕剩余部分呢?只需將父容器設(shè)置flex布局，list設(shè)置flex: 1即可。list下直接放list-item，在總高度超出list的高度后，即可上下滾動(dòng)。

hml：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.          
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.      
  •      
  •          
  •              
  •                  
  •                      
  •                          {{ $item.title }}
  •                      
  •                      
  •                          
  •                              {{ $item.source }}
  •                          
  •                          
  •                              {{ $item.ctime }}
  •                          
  •                      
  •                  
  •              
  •          
  •      
  •  
  •  

    • css：

     
 
 
 
      
  
  
  
  
    1. /*本地新聞*/
      2. 
  
  
  
  
    2. .searchView {
      3. 
  
  
  
  
    3.     width: 100%;
      4. 
  
  
  
  
    4.     height: 140px;
      5. 
  
  
  
  
    5.     background-color: #f0f0f0;
      6. 
  
  
  
  
    6.     display: flex;
      7. 
  
  
  
  
    7.     align-items: center;
      8. 
  
  
  
  
    8. }
      9. 
  
  
  
  
    9. .searchView>image {
      10. 
  
  
  
  
    10.     margin: 0 40px 0 40px;
      11. 
  
  
  
  
    11.     height: 60px;
      12. 
  
  
  
  
    12.     width: 60px;
      13. 
  
  
  
  
    13. }
      14. 
  
  
  
  
    14. .searchView>input {
      15. 
  
  
  
  
    15.     margin-right: 40px;
      16. 
  
  
  
  
    16. }
      17. 
  
  
  
  
    17. .localView {
      18. 
  
  
  
  
    18.     width: 100%;
      19. 
  
  
  
  
    19.     flex: 1;
      20. 
  
  
  
  
    20.     display: flex;
      21. 
  
  
  
  
    21.     flex-direction: column;
      22. 
  
  
  
  
    22. }
      23. 
  
  
  
  
    23. .localContent {
      24. 
  
  
  
  
    24.     margin-left: 20px;
      25. 
  
  
  
  
    25. }
      26. 
  
  
  
  
    26. .newsItem {
      27. 
  
  
  
  
    27.     width: 100%;
      28. 
  
  
  
  
    28.     height: 240px;
      29. 
  
  
  
  
    29.     border-bottom: 1px solid #bbbbbb;
      30. 
  
  
  
  
    30.     display: flex;
      31. 
  
  
  
  
    31.     align-items: center;
      32. 
  
  
  
  
    32. }
      33. 
  
  
  
  
    33. .newsContent {
      34. 
  
  
  
  
    34.     display: flex;
      35. 
  
  
  
  
    35.     flex-direction: column;
      36. 
  
  
  
  
    36.     margin-right: 20px;
      37. 
  
  
  
  
    37.     margin-left: 20px;
      38. 
  
  
  
  
    38. }
      39. 
  
  
  
  
    39. .newsContent>text {
      40. 
  
  
  
  
    40.     margin-top: 20px;
      41. 
  
  
  
  
    41.     height: 140px;
      42. 
  
  
  
  
    42.     font-size: 34px;
      43. 
  
  
  
  
    43.     color: #333333;
      44. 
  
  
  
  
    44. }
      45. 
  
  
  
  
    45. .newsDesc {
      46. 
  
  
  
  
    46.     height: 60px;
      47. 
  
  
  
  
    47.     line-height: 60px;
      48. 
  
  
  
  
    48.     display: flex;
      49. 
  
  
  
  
    49.     justify-content: space-between;
      50. 
  
  
  
  
    50. }
      51. 
  
  
  
  
    51. .newsDesc>text {
      52. 
  
  
  
  
    52.     font-size: 28px;
      53. 
  
  
  
  
    53.     color: #777777;
      54. 
  
  
  
  
    54. }
      55.

     js：

     
 
 
 
      
  
  
  
  
    1. searchLocalNews() {
      2. 
  
  
  
  
    2.      let url = 'http://api.tianapi.com/areanews/index?key=xxxx&areaname=江蘇';
      3. 
  
  
  
  
    3.      if (this.searchWord) {
      4. 
  
  
  
  
    4.          url = url + '&word' + this.searchWord;
      5. 
  
  
  
  
    5.      }
      6. 
  
  
  
  
    6.      fetch.fetch({
      7. 
  
  
  
  
    7.          url: url,
      8. 
  
  
  
  
    8.          responseType: 'json',
      9. 
  
  
  
  
    9.          success: res => {
      10. 
  
  
  
  
    10.              let data = JSON.parse(res.data);
      11. 
  
  
  
  
    11.              this.localNews = data.newslist;
      12. 
  
  
  
  
    12.          }
      13. 
  
  
  
  
    13.      })
      14. 
  
  
  
  
    14.  },
      15.

     新聞列表可滾動(dòng)，且不會(huì)影響搜索框的位置。

    3、list + list-item-group + list-item

    list組件的子元素還可以是list-item-group，顧名思義應(yīng)是分組列表項(xiàng)，list-item作為list-item-group的子元素。隨便寫一點(diǎn)看一看：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.         
      3. 
  
  
  
  
    3.             
      4. 
  
  
  
  
    4.                 
      5. 
  
  
  
  
    5.                     
      6. 
  
  
  
  
    6.                         分組1 子項(xiàng)1
      7. 
  
  
  
  
    7.                     
      8. 
  
  
  
  
    8.                 
      9. 
  
  
  
  
    9.                 
      10. 
  
  
  
  
    10.                     
      11. 
  
  
  
  
    11.                         分組1 子項(xiàng)2
      12. 
  
  
  
  
    12.                     
      13. 
  
  
  
  
    13.                 
      14. 
  
  
  
  
    14.                 
      15. 
  
  
  
  
    15.                     
      16. 
  
  
  
  
    16.                         分組1 子項(xiàng)3
      17. 
  
  
  
  
    17.                     
      18. 
  
  
  
  
    18.                 
      19. 
  
  
  
  
    19.             
      20. 
  
  
  
  
    20.             
      21. 
  
  
  
  
    21.                 
      22. 
  
  
  
  
    22.                     
      23. 
  
  
  
  
    23.                         分組2 子項(xiàng)1
      24. 
  
  
  
  
    24.                     
      25. 
  
  
  
  
    25.                 
      26. 
  
  
  
  
    26.                 
      27. 
  
  
  
  
    27.                     
      28. 
  
  
  
  
    28.                         分組2 子項(xiàng)2
      29. 
  
  
  
  
    29.                     
      30. 
  
  
  
  
    30.                 
      31. 
  
  
  
  
    31.                 
      32. 
  
  
  
  
    32.                     
      33. 
  
  
  
  
    33.                         分組2 子項(xiàng)3
      34. 
  
  
  
  
    34.                     
      35. 
  
  
  
  
    35.                 
      36. 
  
  
  
  
    36.             
      37. 
  
  
  
  
    37.         
      38. 
  
  
  
  
    38.     

     
 
 
 
      
  
  
  
  
    1. .manageList{
      2. 
  
  
  
  
    2.     height: 100%;
      3. 
  
  
  
  
    3.     width: 100%;
      4. 
  
  
  
  
    4. }
      5. 
  
  
  
  
    5. .list-item-group{
      6. 
  
  
  
  
    6.     width: 100%;
      7. 
  
  
  
  
    7.     height: 450px;
      8. 
  
  
  
  
    8. }
      9. 
  
  
  
  
    9. .list-item{
      10. 
  
  
  
  
    10.     width: 100%;
      11. 
  
  
  
  
    11.     height: 150px;
      12. 
  
  
  
  
    12.     display: flex;
      13. 
  
  
  
  
    13.     justify-content: center;
      14. 
  
  
  
  
    14.     align-items: center;
      15. 
  
  
  
  
    15.     border-bottom: 1px solid gray;
      16. 
  
  
  
  
    16. }
      17. 
  
  
  
  
    17. .list-item>text{
      18. 
  
  
  
  
    18.     line-height: 100px;
      19. 
  
  
  
  
    19. }
      20.

    可以看出，list-item-group是可折疊的列表分組，且默認(rèn)是折疊的。點(diǎn)擊右側(cè)小箭頭可展開列表，如果list-item-group給了高度，則折疊和展開后這一塊區(qū)域的高度不變。在折疊時(shí)，展示第一個(gè)list-item的內(nèi)容。

    那么如果每一個(gè)list-item-group中l(wèi)ist-item數(shù)目不固定，在展開后的布局就會(huì)很難看。如下：

    其實(shí)不定義list-item-group的高度即可，折疊高度為list-item的高度，展開后高度自適應(yīng)增長，超出list高度可以滾動(dòng)，功能還是很強(qiáng)大的。更改css后的效果如下：

    這種分組的列表，可以制作一個(gè)簡單的后臺(tái)管理系統(tǒng)菜單界面。這里我將菜單數(shù)據(jù)文件、圖片文件放入nginx服務(wù)器的目錄中，再通過內(nèi)網(wǎng)穿透訪問資源。注意數(shù)據(jù)的格式，list-item-group和list-item之間存在父級標(biāo)簽關(guān)系，故數(shù)據(jù)中也應(yīng)存在父級關(guān)系。list-item-group展示的內(nèi)容是其下第一個(gè)list-item，這里用一個(gè)兩重for循環(huán)實(shí)現(xiàn)：

    manage.json:

     
 
 
 
      
  
  
  
  
    1. {
      2. 
  
  
  
  
    2.     "manageList": [
      3. 
  
  
  
  
    3.         {
      4. 
  
  
  
  
    4.             "name": "組織管理",
      5. 
  
  
  
  
    5.             "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/org.png",
      6. 
  
  
  
  
    6.             "subList": [
      7. 
  
  
  
  
    7.                 {
      8. 
  
  
  
  
    8.                     "name": "查詢組織",
      9. 
  
  
  
  
    9.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/search.png"
      10. 
  
  
  
  
    10.                 },
      11. 
  
  
  
  
    11.                 {
      12. 
  
  
  
  
    12.                     "name": "添加組織",
      13. 
  
  
  
  
    13.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
      14. 
  
  
  
  
    14.                 },
      15. 
  
  
  
  
    15.                 {
      16. 
  
  
  
  
    16.                     "name": "刪除組織",
      17. 
  
  
  
  
    17.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
      18. 
  
  
  
  
    18.                 }
      19. 
  
  
  
  
    19.             ]
      20. 
  
  
  
  
    20.         },
      21. 
  
  
  
  
    21.         {
      22. 
  
  
  
  
    22.             "name": "人員管理",
      23. 
  
  
  
  
    23.             "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/person.png",
      24. 
  
  
  
  
    24.             "subList": [
      25. 
  
  
  
  
    25.                 {
      26. 
  
  
  
  
    26.                     "name": "查詢?nèi)藛T",
      27. 
  
  
  
  
    27.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/search.png"
      28. 
  
  
  
  
    28.                 },
      29. 
  
  
  
  
    29.                 {
      30. 
  
  
  
  
    30.                     "name": "添加人員",
      31. 
  
  
  
  
    31.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
      32. 
  
  
  
  
    32.                 },
      33. 
  
  
  
  
    33.                 {
      34. 
  
  
  
  
    34.                     "name": "批量導(dǎo)入人員",
      35. 
  
  
  
  
    35.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
      36. 
  
  
  
  
    36.                 },
      37. 
  
  
  
  
    37.                 {
      38. 
  
  
  
  
    38.                     "name": "刪除人員",
      39. 
  
  
  
  
    39.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
      40. 
  
  
  
  
    40.                 },
      41. 
  
  
  
  
    41.                 {
      42. 
  
  
  
  
    42.                     "name": "修改人員",
      43. 
  
  
  
  
    43.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/update.png"
      44. 
  
  
  
  
    44.                 }
      45. 
  
  
  
  
    45.             ]
      46. 
  
  
  
  
    46.         },
      47. 
  
  
  
  
    47.         {
      48. 
  
  
  
  
    48.             "name": "卡片管理",
      49. 
  
  
  
  
    49.             "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/card.png",
      50. 
  
  
  
  
    50.             "subList": [
      51. 
  
  
  
  
    51.                 {
      52. 
  
  
  
  
    52.                     "name": "開卡",
      53. 
  
  
  
  
    53.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
      54. 
  
  
  
  
    54.                 },
      55. 
  
  
  
  
    55.                 {
      56. 
  
  
  
  
    56.                     "name": "退卡",
      57. 
  
  
  
  
    57.                     "icon": "http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
      58. 
  
  
  
  
    58.                 }
      59. 
  
  
  
  
    59.             ]
      60. 
  
  
  
  
    60.         }
      61. 
  
  
  
  
    61.     ]
      62. 
  
  
  
  
    62. }
      63.

     hml:

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.              
      5. 
  
  
  
  
    5.                  
      6. 
  
  
  
  
    6.                      
      7. 
  
  
  
  
    7.                          
      8. 
  
  
  
  
    8.                          {{ $item.name }}
      9. 
  
  
  
  
    9.                      
      10. 
  
  
  
  
    10.                      
      11. 
  
  
  
  
    11.                          
      12. 
  
  
  
  
    12.                              
      13. 
  
  
  
  
    13.                              {{ value.name }}
      14. 
  
  
  
  
    14.                          
      15. 
  
  
  
  
    15.                      
      16. 
  
  
  
  
    16.                  
      17. 
  
  
  
  
    17.              
      18. 
  
  
  
  
    18.          
      19. 
  
  
  
  
    19.      
  •      

    • js:

     
 
 
 
      
  
  
  
  
    1. getManageList() {
      2. 
  
  
  
  
    2.        let url = "http://milkytea.free.idcfengye.com/text/manage.json";
      3. 
  
  
  
  
    3.        fetch.fetch({
      4. 
  
  
  
  
    4.            url: url,
      5. 
  
  
  
  
    5.            responseType: 'json',
      6. 
  
  
  
  
    6.            success: res => {
      7. 
  
  
  
  
    7.                let data = JSON.parse(res.data);
      8. 
  
  
  
  
    8.                this.manageList = data.manageList;
      9. 
  
  
  
  
    9.            }
      10. 
  
  
  
  
    10.        })
      11. 
  
  
  
  
    11.    }
      12.

     想了解更多內(nèi)容，請?jiān)L問：

    和華為官方合作共建的鴻蒙技術(shù)社區(qū)

    https://harmonyos./#zz


    網(wǎng)站題目：從微信小程序到鴻蒙JS開發(fā)【04】-list組件
    瀏覽地址：http://m.5511xx.com/article/djesscs.html