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：

{{ $item.title }}

{{ $item.source }}

{{ $item.ctime }}

css：/*本地新闻*/

.searchView {

width: 100%;

height: 140px;

background-color: #f0f0f0;

display: flex;

align-items: center;

}

.searchView>image {

margin: 0 40px 0 40px;

height: 60px;

width: 60px;

}

.searchView>input {

margin-right: 40px;

}

.localView {

width: 100%;

flex: 1;

display: flex;

flex-direction: column;

}

.localContent {

margin-left: 20px;

}

.newsItem {

width: 100%;

height: 240px;

border-bottom: 1px solid #bbbbbb;

display: flex;

align-items: center;

}

.newsContent {

display: flex;

flex-direction: column;

margin-right: 20px;

margin-left: 20px;

}

.newsContent>text {

margin-top: 20px;

height: 140px;

font-size: 34px;

color: #333333;

}

.newsDesc {

height: 60px;

line-height: 60px;

display: flex;

justify-content: space-between;

}

.newsDesc>text {

font-size: 28px;

color: #777777;

}

js：searchLocalNews() {

let url = 'http://api.tianapi.com/areanews/index?key=xxxx&areaname=江苏';

if (this.searchWord) {

url = url + '&word' + this.searchWord;

}

fetch.fetch({

url: url,

responseType: 'json',

success: res => {

let data = JSON.parse(res.data);

this.localNews = data.newslist;

}

})

},

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

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

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