uni-app之scroll-view组件
uni-app使用scroll-view组件不生效的问题
1.横向滚动不生效的问题是因为少了两行代码:
white-space: nowrap;
display:inline-block;
2.纵向滚动 必须指定滚动区域的高度。
不设置高度的话,scroll-view是不会滚动的,此时滚的是页面。
<scroll-view class="classify" scroll-x show-scrollbar>
<view class="classify_item" v-for="(item,index) in classifyList" :key="index">
{{item}}
</view>
</scroll-view>
.classify{
width: 100%;
height: 60upx;
display: flex;
flex-direction: row;
white-space: nowrap; /*横向滚动必须添加css 1.规定段落中得文本不进行换行*/
.classify_item{
overflow: hidden;
background-color: #DD524D;
margin: 2upx;
width: 130upx;
height 50upx;
display: inline-block; /*横向滚动 2.滚动区域内的每一个元素设置为行内块模块*/
}
}
择善人而交,择善书而读,择善言而听,择善行而从。