微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼

更新時間：2018年09月20日 13:44:48 作者：黑金白土

這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、布局及樣式等

（1）xml布局

<view class="container">
  <scroll-view scroll-x="true">
    <view class="item-content" wx:for="{{list}}" wx:for-item="item">
      <view class="title">{{item.title}}</view>
      <view class="content">{{item.content}}</view>
    </view>
  </scroll-view>
</view>

（2）wxss

scroll-view {
  width: 80%;
  white-space: nowrap;
}

.item-content {
  width: 40%;
  display: inline-block;
  border: 1rpx solid gray;
  text-align: center;
}

(3)js文件

data: {
   list: [{title:"題目1", content:"內容1"}, 
     {title:"題目2", content:"內容2"}, 
     {title:"題目3", content:"內容3"}, 
     {title:"題目4", content:"內容4"}]
 }

2、設置橫向滑動要點

（1）設置橫向滑動 scroll-x=”true”。
（2）scroll-view設置寬度及white-space屬性。
（3）item設置display: inline-block屬性。

3、屬性釋疑

（1）white-space：屬性設置如何處理元素內的空白。

normal 默認。規(guī)定段落中的文本不進行換行,空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。

nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到br 標簽為止。

pre-wrap 保留空白符序列，但是正常地進行換行。

pre-line 合并空白符序列，但是保留換行符。

inherit 規(guī)定應該從父元素繼承 white-space 屬性的值。

（2）display: inline-block;設置為內聯(lián)塊。內聯(lián)塊可以設置長寬，但不從父元素繼承長寬。即子元素不換行，成一行排列。

4、其他