4-------------PART THREE导航滑动模块

效果图：
可以左右滑动

.wxml

<!--PART THREE-->
<!--导航滑动模块-->
<scroll-view class="major" scroll-x>
  
    <navigator class="box" url="/pages/ps/ps">
      <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>

</scroll-view>

.wxss

/**PART THREE**/
/**导航滑动模块**/
.major{white-space:nowrap;padding:30rpx 0;/**padding为上下设置间距**/}
.major .box{text-align:center;width:160rpx;/**border:1px solid red;**/display:inline-block;}
.major .pic{width:100rpx;height:100rpx;}
.major .txt{font-size:26rpx;margin-top:8rpx/**设置文字与图片的间隔**/}

公共设置
app.wxss

.container{padding:0 26rpx;box-sizing:border-box;}/**左右两边距页面有间隔**/

@keyframes dh{
  0%,50%,100%{opacity:1;}
  25%{opacity:0;}
}/**右上角联系图标有闪动效果**/