微信小程序scroll-view横向滑动嵌套for循环

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、其他

微信小程序开发文档
参考文章：微信小程序 scroll-view横向滚动 坑