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

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

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

1、overflow属性实现竖直滚动

废话不多说，上代码

one.hml

<div class="container">
    <block for="{
    {arrs}}">
        <div class="boxview">
            <text>{
  {$item}}</text>
        </div>
    </block>
</div>
1
2
3
4
5
6
7
8
9

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

one.js

export default {
   
1