html部分

<div class="container">
  <!-- 金剛區(qū)，兩行-->
  <div class="king-area" @scroll="scroll}">
    <!-- rowMap:{first:[]，second:[]  -->
    <div class="row" v-for="(items, key) in rowMap" :key="key">
      <!-- 上下結(jié)構(gòu)的icon和文字-->
      <div class="icon"
         v-for="(item, index) in items" :key="index">
        <!-- img如果有icon，用icon更佳 -->
        <img class="img" :src="item.icon" alt="" srcset="" />
        <div class="text">{{ item.text}}</div>
      </div>
    </div>    
  </div>
  <!-- 滾動(dòng)條|進(jìn)度條部分，這里直接套用vant-progress的效果 -->
  <div class="van-progress progress">
    <span class="van-progress__portion portion" :style="progressStyle"></span>
  </div>
</div>

兩行，可能會(huì)前后對(duì)齊有些問(wèn)題，看了下淘寶是每列2個(gè)icon, 根據(jù)總數(shù)分成n列
len: icon的個(gè)數(shù)；list：icon對(duì)應(yīng)的列表；奇數(shù)時(shí)，考慮最后一個(gè)沒(méi)有的處理，這里不說(shuō)明了

<div class="container">
  <div class="king-area"  @scroll="scroll">
    <div v-for="i in Math.ceil(len/2)" :key="i" class="col">
      <!-- rowIndex:[2,1] -->
      <div class="icon"
          v-for="j in rowIndex" :key="j">
          <img class="img" :src="list[2*i - j].icon" alt="" srcset="" />
          <div class="text">{{ list[2*i - j].title }}</div>
       </div>
    </div>    
  </div>
  <div class="van-progress progress">
    <span class="van-progress__portion portion" :style="progressStyle"></span>
  </div>
</div>

金剛區(qū)樣式部分這里就不具體介紹了，滾動(dòng)條部分可以如下：

.progress {
  top: 0.1rem;
  width:50px;
  left: 40%;
  .portion {
    background: rgb(242, 130, 106); width: 25px;
  }
}

下面直接寫(xiě)金剛區(qū)滾動(dòng)事件改變滾動(dòng)條（進(jìn)度條）的樣式
用left，也可以用transform: translate(?);

export default {
    name:'XXX',
    data() {
        return {
            progressStyle:''
    }
    methods: {
        scroll(e) { 
            let {scrollWidth, clientWidth, scrollLeft} = e.target
            var maxScrollLeft = scrollWidth - clientWidth  //最大scrollLeft值
            let ratio = maxScrollLeft/50
            //用left，也可以用transform: translate(10px);
            this.progressStyle = `left: ${scrollLeft/ratio}%;`
        }
    }
}