实现

之前使用过弹性盒子来实现该效果，这次使用新的方法。
wxml:

<scroll-view class="major" scroll-x>
  <view class="majorCon">
    <navigator class="box" url=""> 
    <image class="pic" src="/images/kecheng1.png"></image>
    <view class="txt">平面设计</view>
    </navigator>

    <navigator class="box"  url=""> 
    <image class="pic" src="/images/kecheng2.png"></image>
    <view class="txt">室内设计</view>
    </navigator>
    
    <navigator class="box"  url=""> 
    <image class="pic" src="/images/kecheng3.png"></image>
    <view class="txt">UI设计</view>
    </navigator>
    
    <navigator class="box"  url=""> 
    <image class="pic" src="/images/kecheng4.png"></image>
    <view class="txt">影视后期</view>
    </navigator>
    
    <navigator class="box"  url=""> 
    <image class="pic" src="/images/kecheng5.png"></image>
    <view class="txt">web设计</view>
    </navigator>

wxss:

.major{
  white-space: nowrap;
  padding:30rpx 0;
}

.major .box{
  text-align: center;
  width:170rpx ;
  display: inline-block;
}

.major .pic{
  width: 100rpx;
  height: 100rpx;
}

.major .txt{
  font-size: 26rpx;
  margin-top:8rps;
} 

• wxml第一行设置scroll-view标签作为滑动模块容器   

  • wxss中对该标签设置了white-space: nowrap; 表示内部元素不换行（即使超出显示范围依旧往右排列）

• wxss使用了display: inline-block; 来表示不独占一行的块级元素。（表示块级元素不换行）
  

  补充

  display:inline-block

  https://www.cnblogs.com/Ry-yuan/p/6848197.html