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

前言:

在学习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;
}
//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+
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值