Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mpvue 使用小程序的scroll-view 横向不能滚动诶 #416

Closed
EzioL opened this issue May 4, 2018 · 9 comments

Comments

@EzioL
Copy link

@EzioL EzioL commented May 4, 2018

mpvue 使用小程序的scroll-view 横向不能滚动诶
wx20180504-181837 2x

@hucq

This comment has been minimized.

Copy link
Member

@hucq hucq commented May 7, 2018

@EzioL 可以在模拟器里检查一下 page 元素被默认设置了 overflow-x: hidden;模拟器和真机存在差异也是常见的事情。在模拟器里你可以强制重置掉此条默认样式即可。

@hucq hucq closed this May 7, 2018
@EzioL

This comment has been minimized.

Copy link
Author

@EzioL EzioL commented May 9, 2018

scroll-x="true" 赋值进不去呀 变成了 竖直排列了 @hucq

@F-loat

This comment has been minimized.

Copy link
Contributor

@F-loat F-loat commented May 9, 2018

直接写 scroll-x 就行吧

@EzioL

This comment has been minimized.

Copy link
Author

@EzioL EzioL commented May 10, 2018

不可以的诶,第一次就写的 scroll-x 赋值进不去 @F-loat

@lixiang

This comment has been minimized.

Copy link

@lixiang lixiang commented May 19, 2018

@EzioL https://www.cnblogs.com/miu-key/p/7606024.html 我是这样解决的 item 使用 inline-block

@sonicG

This comment has been minimized.

Copy link

@sonicG sonicG commented May 25, 2018

@hucq 这个问题并没有解决,真机上不可以的,必须要给scroll-view内部嵌套一个容器,并固定宽度才可以,小程序原生的示例代码都不行,求官方给个解决方案

@F-loat

This comment has been minimized.

Copy link
Contributor

@F-loat F-loat commented May 25, 2018

@sonicG 估计还是样式问题,按楼上说的设置 display: inline-block 可以解决,小程序官方示例省略了样式部分,原生直接那么写也是一样不行的吧

@bravekingzhang

This comment has been minimized.

Copy link

@bravekingzhang bravekingzhang commented Jul 6, 2018

@EzioL @F-loat 参考小程序官方demo即可。

        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

估计还是样式问题,我用flex布局实现,也是不ok,还是要display:inline-block

@wuyanxin

This comment has been minimized.

Copy link

@wuyanxin wuyanxin commented Dec 9, 2018

我也遇到这个问题和你一样,我这样解决的
在scroll-view加上样式:overflow: hidden; white-space: nowrap;
scroll-view中的的元素要设置:display:inline-block

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.