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

目录：

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：

        <!-- 本地新闻 -->
        <div>
            <div class="searchView">
                <image src="{{ searchIcon }}"></image>
                <input placeholder="搜你想看的"></input>
            </div>
            <list class="localView">
                <block for="{{ localNews }}">
                    <list-item class="newsItem">
                        <div class="newsContent">
                            <text>
                                {{ $item.title }}
                            </text>
                            <div class="newsDesc">
                                <text>
                                    {{ $item.source }}
                                </text>
                                <text>
                                    {{ $item.ctime }}
                                </text>
                            </div>
                        </div>
                    </list-item>
                </block>
            </list>
        </div>
        <!-- 本地新闻end -->

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的子元素。随便写一点看一看：

        <div>
            <list class="manageList">
                <list-item-group class="list-item-group">
                    <list-item class="list-item">
                        <text>
                            <span>分组1 子项1</span>
                        </text>
                    </list-item>
                    <list-item class="list-item">
                        <text>
                            <span>分组1 子项2</span>
                        </text>
                    </list-item>
                    <list-item class="list-item">
                        <text>
                            <span>分组1 子项3</span>
                        </text>
                    </list-item>
                </list-item-group>
                <list-item-group class="list-item-group">
                    <list-item class="list-item">
                        <text>
                            <span>分组2 子项1</span>
                        </text>
                    </list-item>
                    <list-item class="list-item">
                        <text>
                            <span>分组2 子项2</span>
                        </text>
                    </list-item>
                    <list-item class="list-item">
                        <text>
                            <span>分组2 子项3</span>
                        </text>
                    </list-item>
                </list-item-group>
            </list>
        </div>

.manageList{
    height: 100%;
    width: 100%;
}
.list-item-group{
    width: 100%;
    height: 450px;
}
.list-item{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid gray;
}
.list-item>text{
    line-height: 100px;
}

查看更多内容>>>

作者：Chris.

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