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

六合李欣
发布于 2021-1-29 16:17
浏览
0收藏

1.UI效果图

鸿蒙js开发10:鸿蒙的滚动宫格列表视图的实现-鸿蒙开发者社区

 

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
1
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

最好能把源代码打个包作为附件^_^

回复
2021-1-29 20:22:08
回复
    相关推荐