欢迎光临成都祈钰瑶科技有限公司网站!祝您生活愉快!
热线电话: 18982081108
✕

成都服务器托管,成都GPU服务器租用,成都高防BGP宽带租用,成都机柜租用托管

成都祈钰瑶 >> 网站建设知识

从微信小程序到鸿蒙JS开发【04】-list组件

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

1、可滚动区域

在许多场景中，页面会有一块区域是可滚动的，比如这样一个简单的每日新闻模块：

上面的新闻类型是一块可横向滚动的区域，下方新闻列表是一块可竖向滚动的区域。在微信小程序中，使用scroll-view组件即可实现。那么在鸿蒙js组件中，想要实现可滚动的区域，则是使用list组件。list仅支持竖向滚动，横向滚动要用tabs，将在下篇博客讲解。

2、list + list-item

这里以本地新闻模块为例，数据请求自天行数据接口(https://www.tianapi.com/apiview/154)。

上方为一个搜索框，下方是新闻列表。搜索框给了固定高度，那么怎样让新闻列表能够占满屏幕剩余部分呢?只需将父容器设置flex布局，list设置flex: 1即可。list下直接放list-item，在总高度超出list的高度后，即可上下滚动。

hml：

 
 
 
 
    
  
  
  
  
  1. <!-- 本地新闻 -->
    2. 
  
  
  
  
  2.  <div>
    3. 
  
  
  
  
  3.      <div class="searchView">
    4. 
  
  
  
  
  4.          <image src="{{ searchIcon }}"></image>
    5. 
  
  
  
  
  5.          <input placeholder="搜你想看的"></input>
    6. 
  
  
  
  
  6.      </div>
    7. 
  
  
  
  
  7.      <list class="localView">
    8. 
  
  
  
  
  8.          <block for="{{ localNews }}">
    9. 
  
  
  
  
  9.              <list-item class="newsItem">
    10. 
  
  
  
  
  10.                  <div class="newsContent">
    11. 
  
  
  
  
  11.                      <text>
    12. 
  
  
  
  
  12.                          {{ $item.title }}
    13. 
  
  
  
  
  13.                      </text>
    14. 
  
  
  
  
  14.                      <div class="newsDesc">
    15. 
  
  
  
  
  15.                          <text>
    16. 
  
  
  
  
  16.                              {{ $item.source }}
    17. 
  
  
  
  
  17.                          </text>
    18. 
  
  
  
  
  18.                          <text>
    19. 
  
  
  
  
  19.                              {{ $item.ctime }}
    20. 
  
  
  
  
  20.                          </text>
    21. 
  
  
  
  
  21.                      </div>
    22. 
  
  
  
  
  22.                  </div>
    23. 
  
  
  
  
  23.              </list-item>
    24. 
  
  
  
  
  24.          </block>
    25. 
  
  
  
  
  25.      </list>
    26. 
  
  
  
  
  26.  </div>
    27. 
  
  
  
  
  27.  <!-- 本地新闻end -->
    28.

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.

 新闻列表可滚动，且不会影响搜索框的位置。

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

list组件的子元素还可以是list-item-group，顾名思义应是分组列表项，list-item作为list-item-group的子元素。随便写一点看一看：

 
 
 
 
    
  
  
  
  
  1. <div>
    2. 
  
  
  
  
  2.         <list class="manageList">
    3. 
  
  
  
  
  3.             <list-item-group class="list-item-group">
    4. 
  
  
  
  
  4.                 <list-item class="list-item">
    5. 
  
  
  
  
  5.                     <text>
    6. 
  
  
  
  
  6.                         <span>分组1 子项1</span>
    7. 
  
  
  
  
  7.                     </text>
    8. 
  
  
  
  
  8.                 </list-item>
    9. 
  
  
  
  
  9.                 <list-item class="list-item">
    10. 
  
  
  
  
  10.                     <text>
    11. 
  
  
  
  
  11.                         <span>分组1 子项2</span>
    12. 
  
  
  
  
  12.                     </text>
    13. 
  
  
  
  
  13.                 </list-item>
    14. 
  
  
  
  
  14.                 <list-item class="list-item">
    15. 
  
  
  
  
  15.                     <text>
    16. 
  
  
  
  
  16.                         <span>分组1 子项3</span>
    17. 
  
  
  
  
  17.                     </text>
    18. 
  
  
  
  
  18.                 </list-item>
    19. 
  
  
  
  
  19.             </list-item-group>
    20. 
  
  
  
  
  20.             <list-item-group class="list-item-group">
    21. 
  
  
  
  
  21.                 <list-item class="list-item">
    22. 
  
  
  
  
  22.                     <text>
    23. 
  
  
  
  
  23.                         <span>分组2 子项1</span>
    24. 
  
  
  
  
  24.                     </text>
    25. 
  
  
  
  
  25.                 </list-item>
    26. 
  
  
  
  
  26.                 <list-item class="list-item">
    27. 
  
  
  
  
  27.                     <text>
    28. 
  
  
  
  
  28.                         <span>分组2 子项2</span>
    29. 
  
  
  
  
  29.                     </text>
    30. 
  
  
  
  
  30.                 </list-item>
    31. 
  
  
  
  
  31.                 <list-item class="list-item">
    32. 
  
  
  
  
  32.                     <text>
    33. 
  
  
  
  
  33.                         <span>分组2 子项3</span>
    34. 
  
  
  
  
  34.                     </text>
    35. 
  
  
  
  
  35.                 </list-item>
    36. 
  
  
  
  
  36.             </list-item-group>
    37. 
  
  
  
  
  37.         </list>
    38. 
  
  
  
  
  38.     </div>
    39. 
 
 
 
 

 
 
 
 
    
  
  
  
  
  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是可折叠的列表分组，且默认是折叠的。点击右侧小箭头可展开列表，如果list-item-group给了高度，则折叠和展开后这一块区域的高度不变。在折叠时，展示第一个list-item的内容。

那么如果每一个list-item-group中list-item数目不固定，在展开后的布局就会很难看。如下：

其实不定义list-item-group的高度即可，折叠高度为list-item的高度，展开后高度自适应增长，超出list高度可以滚动，功能还是很强大的。更改css后的效果如下：

这种分组的列表，可以制作一个简单的后台管理系统菜单界面。这里我将菜单数据文件、图片文件放入nginx服务器的目录中，再通过内网穿透访问资源。注意数据的格式，list-item-group和list-item之间存在父级标签关系，故数据中也应存在父级关系。list-item-group展示的内容是其下第一个list-item，这里用一个两重for循环实现：

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": "查询人员",
    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": "批量导入人员",
    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:

 
 
 
 
    
  
  
  
  
  1. <!-- 管理 -->
    2. 
  
  
  
  
  2.      <div>
    3. 
  
  
  
  
  3.          <list class="manageList">
    4. 
  
  
  
  
  4.              <block for="{{ manageList }}">
    5. 
  
  
  
  
  5.                  <list-item-group class="list-item-group">
    6. 
  
  
  
  
  6.                      <list-item class="list-item">
    7. 
  
  
  
  
  7.                          <image src="{{ $item.icon }}"></image>
    8. 
  
  
  
  
  8.                          <text>{{ $item.name }}</text>
    9. 
  
  
  
  
  9.                      </list-item>
    10. 
  
  
  
  
  10.                      <block for="{{ (index, value) in $item.subList }}">
    11. 
  
  
  
  
  11.                          <list-item class="list-item">
    12. 
  
  
  
  
  12.                              <image src="{{ value.icon }}"></image>
    13. 
  
  
  
  
  13.                              <text>{{ value.name }}</text>
    14. 
  
  
  
  
  14.                          </list-item>
    15. 
  
  
  
  
  15.                      </block>
    16. 
  
  
  
  
  16.                  </list-item-group>
    17. 
  
  
  
  
  17.              </block>
    18. 
  
  
  
  
  18.          </list>
    19. 
  
  
  
  
  19.      </div>
    20. 
  
  
  
  
  20.      <!-- 管理end -->
    21.

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.

 想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

上一篇：网页制作哪个软件好？
下一篇：代理IP服务器报403错误怎么解决？不要慌，这里有详细的解决方案！
友情链接 : 成都服务器托管　使用虚拟主机空间建站的缺点有哪些　服务器的不工作?　一台服务器能开多少个虚拟主机？　服务器开机卡在启动界面的可能原因　云主机的特点是什么　服务器网络安全有哪些防护措施　云vps如何登录网页　站群服务器搭建代理　服务器多ip好处　vps海外服务器托管有哪些优势　什么是根服务器？