scroll-view 滚动使用

scroll-view是一个uni-app提供滚动的组件。对于滚动原理我们需要有一定的认知，只有当子元素的内容大于父元素的内容时，才能进行滚动。

唯一强调的点：

　　在scroll-view中貌似不能使用flex布局，即使使用后也无法出现相应的结果。另外在scroll-view标签上不需要设置over-flow：hidden,当我们设置了scroll-view的高度后，即使单个元素高度大于scroll-view的高度，也不会超出scroll-view内容显示。

 

当我们需要使用横向滚动时，我们不能使用flex来实现，解决的办法是：首先在scroll-view中设置属性：scroll-x="true"。然后在scroll-view中设置css：

.scroll-view{
    white-space:nowrap; //必须添加，否则无法出现滚动效果。
}

　然后将scroll-view中的子元素设置为inline-block即可。

案例代码，我自己用flex无法实现横向滚动，故采用inline-block。如果您看到这篇文章，并且使用flex实现了scroll-view横向滚动，请留言告知解决方法，谢谢！！

 <view class="s-c-title">x轴滚动</view>
  <scroll-view class="s-c-list-x" scroll-x="true" scroll-left="400">
          <view class="s-c-l-item">01</view>
          <view class="s-c-l-item">02</view>
         <view class="s-c-l-item">03</view>
  </scroll-view>

/**css样式**/
    .s-c-list-x{
        /* display: flex; */
        /* flex-direction: row; */
        /* flex-wrap: nowrap; */
        white-space: nowrap;
        width: 100%;
        height: 450upx;
        background-color: #1abc9c;
        color:#fff;
        overflow: hidden;
        border-radius: 10upx;
    }

  .s-c-list-x .s-c-l-item{
        display: inline-block;
        width: 100%;
        /* height: inherit; */
       height: 450upx;
        background-color:#27ae60;
        text-align: center;
        line-height: 450upx;
        font-size: 100upx;
    }
 .s-c-list-x .s-c-l-item:nth-child(2n){
        background-color: #e74c3c;
    }
/**css 样式**/