微信小程序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

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