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

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

代码如下：

 <!-- 中间金刚区目录图标区域 -->
      <view class="second-module-allicon">
        <scroll-view class="nav-bar" scroll-x bindscroll="scroll">
          <!-- 使用flex布局实现横向滚动，在scroll-view里加一层容器包裹，才会出现滚动效果 -->
          <view class="nav-bar-wrap">
            <block wx:for="{
  {secIcons}}" wx:key='key'>
              <view class="nav-bar-item" bindtap="onNavbarItem" data-id='{
  {item.catalogId}}' data-name="{
  {item.name}}">
                <image src="{
  {item.imgUrl}}" />
                <text>{
  {item.name}}</text>
              </view>
            </block>
          </v