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 預設。規定段落中的文字不進行換行,空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標籤。
nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到br 標籤為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合併空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
（2）display: inline-block;設定為內聯塊。內聯塊可以設定長寬，但不從父元素繼承長寬。即子元素不換行，成一行排列。

4、其他