【CSS】类似淘宝金刚区的滚动条效果-vue版本

html部分

  
  

    
    

      
      

        
        
        
{{ item.text}}
      
    
    
  
  
  

    
  

两行，可能会前后对齐有些问题，看了下淘宝是每列2个icon, 根据总数分成n列
len: icon的个数；list：icon对应的列表；奇数时，考虑最后一个没有的处理，这里不说明了

  

    

      
      

          
          
{{ list[2*i - j].title }}
       
    
    
  
  

    
  

金刚区样式部分这里就不具体介绍了，滚动条部分可以如下：

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

下面直接写金刚区滚动事件改变滚动条（进度条）的样式
用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}%;`
        }
    }
}