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

1、可滚动区域

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

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

2、list + list-item

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

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

上方为一个搜索框，下方是新闻列表。搜索框给了固定高度，那么怎样让新闻列表能够占满屏幕剩余部分呢？只需将父容器设置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;

            }

        })

    },

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

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

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.

秒客网

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

相关文章