首先,在华为的鸿蒙开发者文档里,overflow组件中 scroll 显示当前只支持纵向。
在实验的过程中我们不仅要用到纵向滚动,也需要用到横向滚动,这个时候会发现 overflow 组件不支持横向,那我们只能使用别的方法,可是别的方法不仅复杂,也很难实现我们需要的结果,那怎么办呢?
在多次实验和测试的情况下,我发现DevEco Studio可以使用简单的方法来实现横向滚动,而这个简单的方法就是上文提到的 overflow :scroll,那么如何实现,就由我来给大家解答。
首先,我们创建页面时初始化的页面是没办法实现横向滚动的,所以我们需要另外设计一个页面,页面当然是放在大页面里的。
当我们在编写css的时候,我们将宽度省略,不设置宽度,高度正常设置。然后使用 overflow:scroll 就可以实现了。
实现的结果如图。
下面是我使用的代码,仅供大家参考。
<div class="container"> <div class="midview"> <block for="{{imagesdata}}"> <div class="boxview2"> <image class="imagesview" src="{{$item}}"></image> </div> </block> </div> </div>
.container { display: flex; flex-direction: column; width: 100%; height: 100%; }
.midview{ height: 30%; border: 2vp solid black; /* display: flex;*/ overflow: scroll; }
.boxview2{ width: 30%; height: 90%; margin: 20vp; }
.imagesview{ height: 100%; width: 100%; }
原文地址:https://blog.csdn.net/wt135665/article/details/124816533
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。