啥是金刚区？小程序的金刚区咋实现？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

金刚区是什么，可能还有很多小伙伴不了解，不了解的来补课吧。

看这张图就懂了：

什么是金刚区

金刚区模块是整个界面布局的核心功能区域，通常布局在页面顶部 Banner 之下，金刚区的功能模块不会固定化，会根据业务目标的变更进行灵活调整。这种可变化组合的灵活性就像百变金刚一样，所以大家才把这个功能区域称之为金刚区。

根据米勒法则普通人的工作记忆（Working Memory）只有 7±2 个信息块。

如果给的信息超出了这个数字，大部分人也记不住。所以说，金刚区里的图标数量，最好也维持在这个数，通常来，4 个图标很轻松，说 6 个图标是比较理想的，8~9 个就有点吃力了，10 个就超纲了。目前金刚区形式一般为2-3行，每行4-5个。所有行导航跟随进度条滚动。

小程序实现金刚区的方法

其实实现的方法也很简单。

主要知识点：flex-flow: column wrap 实现两行布局，scroll-view 实现滚动

wxml 代码

 <!-- 中间金刚区目录图标区域 -->
      <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">
                <image src="{{item.imgUrl}}" />
                <text>{{item.name}}</text>
              </view>
            </block>
          </view>
         </scroll-view>
           <!-- 模拟进度条 -->
         <view class="slider">
           <view class="slider-inside .slider-inside-location" style="left:{{left}}"></view>
         </view>
      </view>

wxss 代码

/* 图标模块 */
.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设置 距离左边的百分比
    })
  },
  })