Harmony应用开发实例（一）

容器组件list

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

子组件list-item

用于展示具体的item

容器组件swiper

滑动容器，提供切换子组件显示的能力。

在pages文件夹下建立cookbook文件夹，放入这个页面所需的各个文件：

cookbook页面中有hotcate美食大全、swiper轮换图、top-ten热门三部分·

json文件放入静态文件夹中

swiper部分页面逻辑

<div class="cb-swiper-container">
    <swiper>
        <image for="{{list.slice(0, 5)}}" src="{{$item.img}}"></image>
    </swiper>
</div>

各个界面的js部分逻辑基本相同 

import list from '../../../common/data/cookbook-hotcat.json';

export default {
    data: {
        list: []
    },

    onReady() {
        this.list = list
    }
}

cookbook主界面的逻辑如下

<element name="cb-swiper" src="./swiper1/swiper1"></element>
<element name="cb-hotcate" src="./hotcate/hotcate"></element>
<element name="cb-top10" src="./top-ten/top-ten"></element>

<div class="cb-container">
    <div class="cb-title">
      <text>
          美食大全
      </text>
    </div>
    <div class="cb-body">
        <list>
            <list-item class="cb-body-item">
                <cb-swiper list="{{list}}"></cb-swiper>
                <cb-hotcate ></cb-hotcate>
                <cb-top10 list="{{list}}"></cb-top10>
            </list-item>
        </list>
    </div>
</div>

将三部分的hml导入，写在list中