HarmonyOS中利用overflow属性实现横向滚动失效的解决方法

最新推荐文章于 2024-05-24 16:46:52 发布

the_ghostzzz

最新推荐文章于 2024-05-24 16:46:52 发布

阅读量1k

点赞数 4

文章标签： harmonyos javascript 华为

本文链接：https://blog.csdn.net/the_ghostzzz/article/details/124832269

版权

本文详细介绍了在HarmonyOS中遇到的overflow属性导致横向滚动失效的问题，通过分析overflow属性的作用，逐步解析了竖直滚动的实现，并深入探讨了横向滚动失效的原因。文中提出两种解决方案：一是通过改进的overflow方法，实现局部页面的横向滚动；二是利用list和list-item组件来达到相同效果。

摘要由CSDN通过智能技术生成

HarmonyOS中利用overflow属性实现横向滚动失效的解决方法

既然要用到overflow属性，那我们先来看看overflow属性究竟有什么作用（菜鸟教程上的定义）。

在这里插入图片描述

1、overflow属性实现竖直滚动

废话不多说，上代码

one.hml

<div class="container">
    <block for="{
    {arrs}}">
        <div class="boxview">
            <text>{
  {$item}}</text>
        </div>
    </block>
</div>

one.css

.container {
   
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: scroll;	
    /*在需要滚动的盒子中添加overflow属性 设为scroll即可实现滚动效果。
    配合flex弹性布局的flex-direction属性 （column）按竖直方向排列
    即可实现竖直滚动效果*/
}

.boxview{
   
    width: 100%;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1vr solid black;
}