目录:

1、可滚动区域

2、list + list-item

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

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

css:

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

js:

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

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

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

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

  1. <div>
  2. <list class="manageList">
  3. <list-item-group class="list-item-group">
  4. <list-item class="list-item">
  5. <text>
  6. <span>分组1 子项1</span>
  7. </text>
  8. </list-item>
  9. <list-item class="list-item">
  10. <text>
  11. <span>分组1 子项2</span>
  12. </text>
  13. </list-item>
  14. <list-item class="list-item">
  15. <text>
  16. <span>分组1 子项3</span>
  17. </text>
  18. </list-item>
  19. </list-item-group>
  20. <list-item-group class="list-item-group">
  21. <list-item class="list-item">
  22. <text>
  23. <span>分组2 子项1</span>
  24. </text>
  25. </list-item>
  26. <list-item class="list-item">
  27. <text>
  28. <span>分组2 子项2</span>
  29. </text>
  30. </list-item>
  31. <list-item class="list-item">
  32. <text>
  33. <span>分组2 子项3</span>
  34. </text>
  35. </list-item>
  36. </list-item-group>
  37. </list>
  38. </div>
  1. .manageList{
  2. height: 100%;
  3. width: 100%;
  4. }
  5. .list-item-group{
  6. width: 100%;
  7. height: 450px;
  8. }
  9. .list-item{
  10. width: 100%;
  11. height: 150px;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. border-bottom: 1px solid gray;
  16. }
  17. .list-item>text{
  18. line-height: 100px;
  19. }

查看更多内容>>>

作者:Chris.

想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

从微信小程序到鸿蒙js开发【04】——list组件的更多相关文章

  1. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  2. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  3. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  4. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  5. 从微信小程序到鸿蒙js开发【06】——swiper&animator&marquee

    目录: 1.swiper轮播图 2.image-animator幻灯片 3.marquee跑马灯 4.nginx动静分离 1.swiper轮播图 微信小程序的swiper组件中只能放置swiper-i ...

  6. 从微信小程序到鸿蒙js开发【08】——表单组件&注册登录模块

    目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button ...

  7. 从微信小程序到鸿蒙js开发【05】——tabs组件&每日新闻

    目录: 1.tabs, tab-bar, tab-content 2.tabs的事件处理 3.tabs实现的每日新闻 1.tabs, tab-bar, tab-content 上章说到,鸿蒙的list ...

  8. 微信小程序--家庭记账本开发--04

    界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...

  9. 微信小程序购物商城系统开发系列-目录结构

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...

随机推荐

  1. Windows下使用Graalvm将Javafx应用编译成exe

    1 背景 Graalvm是Oracle推出的一款新型虚拟机,其中一个吸引人的功能是:它可以将Java代码编译成各个平台的本地代码,这些平台包括:linux.macOS.windows.iOS.andr ...

  2. thinkphp3.2框架运行原理

    thinkphp3.2是使用率非常普遍的国产php框架,以简单易于上手闻名,那么它框架结构是怎样的? tp3.2设计简单来说就是CBD,core(框架核心文件),bebavior(行为,tp3.2一大 ...

  3. springboot源码解析-管中窥豹系列之aware(六)

    一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...

  4. Hdfs手动执行Balance

    问题发现: 经巡检,服务器中一台节点的hadoop磁盘占用过多,是其它节点的三倍,导致数据严重不均衡. 解决过程: 两种命令: hadoop的bin目录下,运行命令start-balancer.sh ...

  5. 不要把file,process或者super权限授予管理员以外的账号

    file权限的主要作用是通过select ....into outfile 写到服务器上具有写权限的目录下,作为文本格式存放,具有权限的目录也就是启动mysql时的用户权限目录.(没有理解) 可以将有 ...

  6. Oracle 索引原理分析

    索引是一种允许直接访问数据表中某一数据行的树型结构,为了提高查询效率而引入,是一个独立于表的对象,可以存放在与表不同的表空间中.索引记录中存有索引关键字和指向表中数据的指针(地址).对索引进行的I/O ...

  7. kubernets之Deployment资源

    一  声明式的升级应用 1.1  回顾一下kubernets集群里面部署一个应用的形态应该是什么样子的,通过一副简单的图来描述一下 通过RC或者RS里面的模板创建了三个pod,之后通过一个servci ...

  8. scp等不需要存入know_host

    1.修改sshd的配置文件 vi /etc/ssh/ssh_config 修改为如下 StrictHostKeyChecking no UserKnownHostsFile /dev/null 重启s ...

  9. 集成 12 种协议、可于 USBC 端口的快充协议芯片IP2188

    1. 特性  支持 12 种 USB 端口快充协议  支持 USB TypeC PD2.0/PD3.0/PPS DFP 协议  支持多种充电协议(QC3.0/QC2.0,FCP,SCP, AFC,MT ...

  10. 细数JS中实用且强大的操作符&运算符

    目录 1,前言 2,代码+应用 2.1,短路运算符 || 2.2,短路运算符 && 2.3,零合并操作符 ?? 2.4,可选链操作符 ?. 2.5,位运算符 & 和 | 2.6 ...