直接上代码，nice
结构

<ul class="area-nav" ref="citynav">
     <li class="active">贵阳市</li>
     <li>遵义市</li>
     <li>六盘水市</li>
     <li>安顺市</li>
     <li>毕节市</li>
     <li>铜仁市</li>
     <li>黔东南市</li>
     <li>黔南市</li>
     <li>黔西南市</li>
</ul>

样式

  .area-nav{
    height: 53px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* flex-wrap: nowrap; */
    /* justify-content: space-between; */
    border-bottom: 1px solid #E9D9D6;;
    margin-bottom: 21px;
    overflow-x: auto;
    overflow-y: hidden;
    
    transition: margin-left 2s;
    -webkit-transition: margin-left 2s; /* Safari */
    
  }
  .area-nav::-webkit-scrollbar{
        height: 5px;
  }
  .area-nav li{
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 50px;
    color: #333333;
    position: relative;
    display: inline-table;
    padding: 0 20px;
    flex-shrink: 0;
  }
  .area-nav li.active,.area-nav li:hover{
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FA3230;
  }
  .area-nav li.active:after,.area-nav li:hover:after{
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40%;
    height: 6px;
    background: #FF5B36;
    border-radius: 3px;
  }

脚本

cityBanner:function(){
    let speed = 0;
    let pl = 0;//判断上一次值和本次值是否一样调换方向
    window.setInterval(function(){
        //这里scrollWidth 不是scrollLeft值
        if(speed == 2 && pl == thisApp.$refs.citynav.scrollLeft){
            speed = -1;
        }else if(thisApp.$refs.citynav.scrollLeft == 0){
            speed = 2;
        }
        pl = thisApp.$refs.citynav.scrollLeft;
        thisApp.$refs.citynav.scrollLeft += speed;        
    },50);
}