长安外贸网站建设仿京东网站

 overflow-x:auto无效的可能原因：

1.父元素上层用了  position: fixed;那父元素要固定宽高

2.子元素用了浮动
3.父元素自动换行了

 下面可正常显示

 父元素样式：

overflow-x: auto; // 水平方向内容溢出显示滚动条
width: 300px; // 根据实际情况设置宽
height: 30px; // 根据实际情况设置高
white-space: nowrap; // 不换行

子元素样式：

display: inline-block;
或者
display: inline;

 

 下面是我实现上面的案例

 <view class="xx-tablist"><view   bindtap="tab_click" wx:for="{{tablist}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-id="{{item.id}}" class="{{index==0?'tab_item':'tab_item_left'}}"><view class="{{item.id==selTab?'tab_nameBlue':'tab_name'}}"> {{item.name}}</view></view></view>

 .xx-tablist{
display: flex;
overflow-x: auto;
padding-top: 20rpx;
padding-left: 30rpx;border-bottom: 2rpx solid #EFEFEF;width: 730rpx;}.tab_item {min-width: 150rpx;}.tab_item_left {min-width: 150rpx;margin-left: 42rpx;}.tab_name {font-size: 28rpx;color: #424242;text-align: center;position: relative;font-family: Alibaba PuHuiTi;font-weight: 500;height: 60rpx;color: #424242;}.tab_nameBlue {position: relative;text-align: center;font-size: 28rpx;height: 60rpx;font-family: Alibaba PuHuiTi;font-weight: 700;color: #2A66EA;border-bottom: 4rpx solid #2A66EA;}

     
export default class Web extends wepy.page {data = {selTab:'1',//当前选中的tab idtablist:[{name:'柜体产线',id:1,},{name:'门板产线',id:2},{name:'背板产线',id:3},{name:'木工产线',id:4},{name:'五金产线',id:5}],}methods = {tab_click(e){var id = e.currentTarget.dataset.idthis.selTab=idthis.$apply()},}