小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在scroll-view中设置scroll-x=“true”无效，求指教
19 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
scroll-view 的高度需要指定
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
多谢
<scroll-view class=
'sort_class_con'
scroll-x>
<view class=
'scr_x_con'
>
"s_ite"
wx:
for
=
"{{styleSorts}}"
wx:key=
"{{item.id}}"
data-index=
"{{index}}"
bindtap=
"changeStyleSort"
<text>{{item.name}}</text>
</view>
</scroll-view>
我的样式是这样的：sort_class_con给width:100%,scr_x_con给width:auto，s_ite给display:inline-block
用这个方式：留意当中的 斜粗体，添加这几项即可
<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"/>
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 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>
这样使用是可以的
怎么解决的？？
我解决的办法是设定好 width=100% , overflow: auto 。
应该说如果是-y就是height，-x则是width
要设置height，并且内容要充满，不然无效
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
scroll-view 的高度需要指定
多谢
<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 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 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
要设置height，并且内容要充满，不然无效