從微信小程序到鴻蒙js開發【04】——list組件

目錄：css

三、list + list-item-group + list-item微信小程序

一、可滾動區域api

在許多場景中，頁面會有一塊區域是可滾動的，好比這樣一個簡單的每日新聞模塊：微信

上面的新聞類型是一塊可橫向滾動的區域，下方新聞列表是一塊可豎向滾動的區域。在微信小程序中，使用scroll-view組件便可實現。那麼在鴻蒙js組件中，想要實現可滾動的區域，則是使用list組件。list僅支持豎向滾動，橫向滾動要用tabs，將在下篇博客講解。iview

二、list + list-item佈局

這裏以本地新聞模塊爲例，數據請求自天行數據接口（https://www.tianapi.com/apiview/154）。post

上方爲一個搜索框，下方是新聞列表。搜索框給了固定高度，那麼怎樣讓新聞列表可以佔滿屏幕剩餘部分呢？只需將父容器設置flex佈局，list設置flex: 1便可。list下直接放list-item，在總高度超出list的高度後，便可上下滾動。fetch

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;
            }
        })
    },

新聞列表可滾動，且不會影響搜索框的位置。

三、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;
}