HarmonyOS学习第二天 使用div组件实现滚动滑动所犯错误及反思

一、overflow 样式

在华为的官方文档上对div容器中的overflow样式进行了这样的解释

我们将通过使用overflow：scroll 样式来实现 当子元素所用的空间大于父元素所提供的大小时，子元素可以进行滚动显示

二、实现纵向滚动

也就是子元素的高度大于父元素时

（1）子元素的父元素不是根容器    可以滚动

<div class="cview">
    <div class="cview1">
        <block for="{{arrs}}">
            <div class="cview2">
                <text>{{$item}}</text>
            </div>
        </block>
    </div>
</div>

.cview{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.cview1{
    width: 100%;
    height: 64%;
    display: flex;
    border:2px solid black;
    flex-direction: column;
    overflow: scroll;
}
.cview2{
    width: 100%;
    height: 24%;
    display: flex;
    justify-content: center;
    align-items: center;
}

 cview2的高度24%，block遍历了30次cview2 所以总的高度大于其父容器cview1（cview1高度为64%），而cview1是cview2的父容器，cview1不是根容器，根容器是cview，所以我们可以实现其滚动的同时还可设置滚动区域的高度，如cview1,高度为64%。效果如下如图：

 （二）子元素的父元素是根容器    

<div class="cview">
        <block for="{{arrs}}">
            <div class="cview1">
                <text>{{$item}}</text>
            </div>
        </block>
</div>

.cview{
    display: flex;
    flex-direction: column;
    width: 100%;
   /*  height:100%   */
    display: flex;
    align-items: center;
    overflow: scroll;
}

.cview1{
    width: 100%;
    height: 24%;
    display: flex;
    justify-content: center;
    align-items: center;
} 

跟上述一样，遍历30次的cview1的高度大于cview，而cview是根容器，所以我们不能设置cview的高度，否则会在被分配的高度区域平均分布挤在一起，不能滚动。

cview设置高度（即cview中 height不注释）：不能滚动

cview不设置高度（即cview中 height注释掉）：可以滚动

 

 

三、水平滚动

即子元素的宽度大于父容器宽度

（1） 子元素的父元素不是根容器      可以滚动

<div class="rview">
    <div class="rview1">
        <block for="{{arrs}}">
            <div class="rview2">
                <text>{{$item}}</text>
            </div>
        </block>
    </div>
</div>

.rview{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rview1{
    height: 60%;
    width: 80%;
    display: flex;
    border: 1px solid black;
    overflow: scroll;
    align-items: center;
}
.rview2{
    height: 60%;
    width: 28%;
    border: 1px solid darkkhaki;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

rview2 宽度为28%，遍历30次 大于父容器宽度，而父容器是rview1，不是根容器rview,所以跟纵向滚动一样可以规定滚动区域，即规定rview1在根容器rview的位置。

效果如下

可以看出，水平滚动是可以实现的，但官网文档说只支持纵向滚动是不严谨的，但是从图片可看出水平滚动是没有滚动条的。

（二） 子元素的父元素是根容器   不能滚动

<div class="rview">
        <block for="{{arrs}}">
            <div class="rview1">
                <text>{{$item}}</text>
            </div>
        </block>
</div>

.rview{
/*    width: 100%;*/
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rview1{
    height: 60%;
    width: 40%;
    display: flex;
    border: 1px solid black;
    overflow: scroll;
    align-items: center;
}

不管rview中的width是否注释掉，效果都是被挤压在rview根容器的宽度内，不能滚动

 四、总结

子元素宽度（或高度）大于父元素时，如果父元素是根容器，最好在根容器中再分配一个容器当作子元素的父容器，这样的话，肯定能够滚动，并且更加容易实现你想要的效果。

五、笔记

Harmony 中只能有一个根容器，否则会报错误

 

 而微信小程序可以有多个