小程序scroll-view 实现两行滑动金刚区，滑动进度条

业务需要，需要做一个两行可滑动的金刚区展示模块，效果图如下：

代码如下：

 
      
        
          
          
            
              
                
                {{item.name}}
              
            
          
         
           
         
           
         
      

css代码如下:

/* 图标模块 */
.second-module-allicon{
  background: #ffffff;
  border-radius:8px;
  position: relative;
  height: 380rpx;
  overflow : hidden;
}

scroll-view {
  white-space: nowrap;
}
/* 去除滚动条 */
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}
.nav-bar-wrap {
  display: flex;
  flex-flow: column wrap;    /* 金刚区排序方式*/
  height: 330rpx;
}

.nav-bar-item {
  width: 175rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 28rpx;
}

.nav-bar-item image {
  display: block;
  height: 88rpx;
  width: 88rpx;
  margin: 0;
}

.nav-bar-item text {
  margin-top: 8rpx;
  line-height: 34rpx;
  color:rgba(51,51,51,1);
  font-size: 24rpx;
}

.slider {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 64rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background: #eee;
}

.slider-inside {
  transform: translateX(-100%);
  width: 42rpx;
  height: 100%;
  border-radius: 3rpx;
  background-color: #31B877;
}
/* 滑块滑动模拟 */
.slider-inside-location {
  position: absolute;
  left: 65.625%;
}

js代码如下:

Page({
  data: {
  left:0.625  // 初始化滑块位置
  },
    //金刚区滑动事件
  scroll(event){
    let scrollLeft = event.detail.scrollLeft + 375;
    let scrllWidth = event.detail.scrollWidth;
    let left;
    if(scrollLeft < 395){
      left = `65.625%`
    }else{
      left = `${(scrollLeft) / scrllWidth * 100}%`
    }
    this.setData({
      left, //模拟滑块滑动 根据css设置 距离左边的百分比
    })
  },
  })