uni-app, using scroll-view to achieve horizontal scrolling

foreword

In the development project, when a requirement is encountered, it is required to be able to slide horizontally, and the scroll-view component can just meet this requirement. The renderings are as follows:

accomplish

1. scroll-view, must be set: white-space: nowrap;
2. The outermost layer of item layout must be inline layout, for example: inline-block or inline-flex 

Specific demo code

Layout code:

<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 style:

.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;
}