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 樣式**/