前言
开发项目中,遇到需求,要求可以横向滑动,而scroll-view组件正好可以满足这一需求。效果图如下:
实现
- scroll-view,必须设置:white-space: nowrap;
- item布局最外层,必须为行内布局,例如:inline-block 或 inline-flex
具体演示代码
布局代码:
<scroll-view :scroll-x="true" class="scrollview-box" >
<block v-for="item in list" :key="item">
<view class="item">
<image src="/static/logo.png" class="cover" mode="aspectFill"></image>
<text class="name">{
{item}}</text>
</view>
</block>
</scroll-view>
css样式:
.scrollview-box{
white-space: nowrap; // 滚动必须加的属性
width: 100%;
padding: 20rpx 20rpx 20rpx 20rpx;
}
.item{
width: 166rpx;
height: 273rpx;
margin-right: 20rpx;
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
flex-direction: column;
align-items: center;
}
.cover{
width: 165rpx;
height: 165rpx;
}
.name{
font-size: 24rpx;
color: #000000;
line-height: 42rpx;
padding: 0;
width: 90%;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}