scroll-view不能横向滚动
发布于 7 年前 作者 guiying48 10020 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）
  • 预期表现

期望可以横项滚动图片

  • 复现路径
  • 提供一个最简复现 Demo

代码代码:

wxml:

<block wx:for-item="category" wx:for="{{categories}}">
  <view>
    <view>
      <text>{{category.name}}</text>
    </view>
    <scroll-view scroll-x>
      <block wx:for-item="scene" wx:for="{{category.scenes}}">
        <image id="{{index}}" src="{{scene.url}}"></image>
      </block>
    </scroll-view>
  </view>
</block>

js:

Page({
 
  data: {
    categories: [{
        name: "L1",
        scenes: [{
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }]
      }, {
        name: "L2",
        scenes: [{
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }, {
          url: "https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18092610"
        }]
      }
 
    ]
  }
})
1 回复

横向的内容要超过 scroll-view的宽度，设上

white-space: nowrap

回到顶部