scroll-view的问题
发布于 6 年前 作者 wsong 8550 次浏览 来自 问答

在scroll-view中设置scroll-x=“true”无效，求指教

10 回复
<scroll-view class='sort_class_con' scroll-x>
            <view class='scr_x_con'>
                <view class="s_ite" wx:for="{{styleSorts}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap="changeStyleSort">
                    <text>{{item.name}}</text>
                </view>
            </view>
        </scroll-view>

我的样式是这样的：sort_class_con给width:100%,scr_x_con给width:auto，s_ite给display:inline-block

<scroll-view scroll-x=“true” style=" white-space: nowrap; display: flex;overflow:auto;width:100%" >

  <view style=“background: red; width: 200px; height: 100px; display: inline-block” ></view>

  <view style=“background: green; width: 200px; height: 100px; display: inline-block”></view>

</scroll-view>

这样使用是可以的

多谢

我解决的办法是设定好  width=100% , overflow: auto 。

多谢

怎么解决的？？

应该说如果是-y就是height，-x则是width

用这个方式：留意当中的 斜粗体，添加这几项即可

<scroll-view scroll-x style=“width:100%;height: 100px;overflow:scroll;white-space:nowrap”>

<view class=“itemcont” catchtap=“onsetTap” data-setdetailid="{{setdetailId}}" data-imgsrc="{{setImg}}" hover hover-class=“view-item-hover”>

<view class=“itemtitle”>{{setName}}</view>

<image src="{{setImgsm}}" class=“itemimg” mode=“widthFix”/>

</view>

</scroll-view>

c s s:

.itemcont{

width: 160rpx;

height: 160rpx;

overflow: hidden;

border-radius: 4px;

margin: 3px 5px;

border: 2px solid #eee;

position: relative;

display: inline-block;

}


scroll-view 的高度需要指定

要设置height，并且内容要充满，不然无效

回到顶部