HarmonyOS学习第二课：关于横向滚动视图的一些想法_harmonyos div 滚动

前言：

在学习HarmonyOS过程中，使用div组件时，当页面设置元素内容区超过元素本身大小，我们通常会采用overflow的css样式去使得元素内容超过元素大小时，进行滚动显示并展示滚动条。
例如：

---

问题描述

通常，我们在使用overflow:scroll样式时，元素滚动的方向为纵向滚动。而当我们想要实现横向滚动视图时，查询华为官方开发文档发现：

其中overflow:scroll样式并不支持横向滚动。

---

原因分析：

官方文档对此有以下说明：

根据我对官方说明的理解，当我们使用overflow:scroll设置纵向滚动时，我们采用了flex布局的column即纵向布局，同时我们没有限制容器的高度，这时我们可以看做将容器方向设置为纵向，所以当元素内容超过元素大小时，就会纵向滚动，相关效果见前言，代码如下：

//css部分
.container {
   
    display: flex; /**响应式布局**/
    flex-direction: column;
    width: 100%;
/**height: 100%;**/
    overflow: scroll;
}
.boxview{
   
    width: 100%;
    height: 12%;
    border-bottom: 1vp solid  black;
    display: flex;
    justify-content: center;
    align-items: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//js部分
export default {
   
    data: {
   
        arrs:[]
    },
    onInit() //onInit页面初始化加载
    {
   
        //arrs放100个字符串类型的数据
        // var和let区别：
        //javascript是个弱类型语言  java是个强类型语言
        for(let  i =0 ; i<=100; i++)
        {
   
            //数组放入数据  第+i+项
            this.arrs.push("第"+i+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17