> 文档中心 > DevEco Studio 实现横向滚动

DevEco Studio 实现横向滚动

首先,在华为的鸿蒙开发者文档里,overflow组件中 scroll 显示当前只支持纵向。

在实验的过程中我们不仅要用到纵向滚动,也需要用到横向滚动,这个时候会发现 overflow 组件不支持横向,那我们只能使用别的方法,可是别的方法不仅复杂,也很难实现我们需要的结果,那怎么办呢?

在多次实验和测试的情况下,我发现DevEco Studio可以使用简单的方法来实现横向滚动,而这个简单的方法就是上文提到的 overflow :scroll,那么如何实现,就由我来给大家解答。

首先,我们创建页面时初始化的页面是没办法实现横向滚动的,所以我们需要另外设计一个页面,页面当然是放在大页面里的。

当我们在编写css的时候,我们将宽度省略,不设置宽度,高度正常设置。然后使用 overflow:scroll 就可以实现了。

实现的结果如图。

 下面是我使用的代码,仅供大家参考。

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