小程序两行金刚区以及进度条平滑滚动的实现

大家好，欢迎来到IT知识分享网。

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

看这张图就懂了：

什么是金刚区

金刚区模块是整个界面布局的核心功能区域，通常布局在页面顶部 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设置 距离左边的百分比 }) }, })