scroll-view的问题
在scroll-view中设置scroll-x=“true”无效,求指教
在scroll-view中设置scroll-x=“true”无效,求指教
<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>
这样使用是可以的
用这个方式:留意当中的 斜粗体,添加这几项即可
<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;
}