uni-app，使用scroll-view实现横向滚动

前言

开发项目中，遇到需求，要求可以横向滑动，而scroll-view组件正好可以满足这一需求。效果图如下：

实现

1. scroll-view，必须设置：white-space: nowrap;
2. 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;
}