微信小程序scroll-x失效的解决方法

失效的scroll-x

在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动。。。。
然而，在实际开发中，发现并不是这么简单。。。贴上部分wxml和wxss代码...

  
    
      
        
          
          
            jed_shi
            剩余09:43:21
          
        
        
          
        
        
          ￥321
          加入
        
      
      
        
          
          
            jed_shi
            剩余09:43:21
          
        
        
          
        
        
          ￥321
          加入
        
      
      
        
          
          
            jed_shi
            剩余09:43:21
          
        
        
          
        
        
          ￥321
          加入
        
      
      
        
          
          
            jed_shi
            剩余09:43:21
          
        
        
          
        
        
          ￥321
          加入
        
      
    

.scroll-box {
  margin-top: 33rpx;
  padding-bottom: 40rpx;
}
.scroll-box .box:first-child {
  margin-left: 32rpx;
}

.scroll-box .box {
  width: 296rpx;
  margin-right: 32rpx;
}

.scroll-box .box .box-hd {
  display: flex;
  align-items: center;
}

.scroll-box .box .box-hd image {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.scroll-box .box .box-hd .info {
  display: flex;
  flex-direction: column;
}

.scroll-box .box .box-hd .info .name {
  font-size: 28rpx;
  color: #333;
  line-height: 1;
  padding-bottom: 10rpx;
}

.scroll-box .box .box-hd .info .time {
  font-size: 22rpx;
  color: #999;
  line-height: 1;
}

.scroll-box .box .box-img {
  margin-top: 16rpx;
}

.scroll-box .box .box-img image {
  width: 296rpx;
  height: 222rpx;
  border-radius: 15rpx;
}

.scroll-box .box .box-extra {
  display: flex;
  justify-content: space-between;
}

.scroll-box .box .box-extra .price {
  font-size: 32rpx;
  color: #f15733;
}

.scroll-box .box .box-extra button {
  width: 104rpx;
  height: 44rpx;
  background-color: #f15733;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 26rpx;
  line-height: 44rpx;
  margin-right: 8rpx;
}

解决方案。。

后来发现其实只要给scroll-view加上white-space: nowrap; ，给scroll-view的子元素box加上display:inline-block就行了。。。
就像这样：

.scroll-box {
white-space: nowrap;
}
.scroll-box .box{
display:inline-block
}

就可以很爽的横向滑动了。。。。完美解决了

温馨提示

可以不用给scroll-view设置display:flex;这种属性了，但一定要加上这个

.scroll-box {
white-space: nowrap;
}