前言:
在学习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+