scroll-view 中纵向排列实现代码

原创于 2024-02-18 17:45:37 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端VUE 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在CSS和Vue.js中使用`.classnameview`和`.classname`类进行元素布局，特别是`.scroll-view`组件的`scroll-x`属性，展示了如何创建一个水平滚动的视图来显示多行内容（如A、B、C、D、E和F）。

.classname view{
  width: 100px;
  height:100px;
  display: inline-block;
}
.classname{
  width: 400px;
  height: 120px;
  border:1px solid red;
  white-space:nowrap;
  display: flex;
}

<scroll-view class="classname" scroll-x="true" >
<view>A</view>
<view>B</view>
<view>C</view>
<view>D</view>
<view>E</view>
<view>F</view>
</scroll-view>