鸿蒙js开发10：鸿蒙的滚动宫格列表视图的实现 原创

1.UI效果图

2.js业务逻辑部分

export default {
    data: {
        title: 'World',
        //滚动的宫格布局
        griddatas:[[{"text":"one","imgpath":"common/a0.jpg"},{"text":"two","imgpath":"common/a1.jpg"}],
                   [{"text":"three","imgpath":"common/a2.jpg"},{"text":"four","imgpath":"common/a3.jpg"}],
                   [{"text":"南京","imgpath":"common/a3.jpg"},{"text":"六合","imgpath":"common/a9.jpg"},
                    {"text":"李欣","imgpath":"common/a9.jpg"}],


        ]
    }
}

3.页面布局文件

<div class="container">
   <list  class="listview">
      <block for="{{griddatas}}">
        <list-item  class="listitem">
            <block  for="{{ (index,value) in $item}}">
                <div  class="box">
                    <image  class="img"  src="{{value.imgpath}}"></image>
                    <text>{{value.text}}</text>
                </div>
            </block>
        </list-item>
      </block>
   </list>
</div>

4.样式部分

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1500px;
    background-color: snow;

}
.listview{
    width: 100%;
    height: 100%;
}
.listitem{
    width: 100%;
    height: 26%;
    display: flex;
    border-bottom: 5px  solid  snow;
    justify-content: center;
    align-items: center;
}
.box{
    width: 40%;
    height: 50%;
    border-radius: 30px;
    border: 6px  solid snow;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.img{
    width: 200px;
    height: 160px;
    border-radius: 16px;
}