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

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"}],


        ]
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

.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;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.