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

最新推荐文章于 2025-03-18 11:44:25 发布

原创最新推荐文章于 2025-03-18 11:44:25 发布 · 5.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

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

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现横向滑动布局的方法，包括XML布局定义、WXSS样式设置以及JS数据绑定。通过具体示例展示了如何使用scroll-view组件结合特定样式属性实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;设置为内联块。内联块可以设置长宽，但不从父元素继承长宽。即子元素不换行，成一行排列。