uniapp 小程序 类型电话侧边索引

数组格式
newlist:[
{
brandId: 382
categoryId: 5
enFirstChar: "A"
id: 382
logo: "https://imgproduct.cehome.com//4/20150729/4LGZjwzGHif1438156941LczN4hBIbI4.png"
name: "奥邦"
},
{
brandId: 6
categoryId: 5
enFirstChar: "A"
id: 6
logo: "https://imgproduct.cehome.com/data/brandlogo/1280714691012.jpg"
name: "阿特拉斯中国"
}
]

util.js修改格式
function groupBy(array, key) {
  return array.reduce(function(groups, item) {
    var group = item[key];
    if (!groups[group]) {
      groups[group] = [];
    }
    groups[group].push(item);
    return groups;
  }, {});
}

转换效果为
newlist:[
A：[
{
brandId: 382
categoryId: 5
enFirstChar: "A"
id: 382
logo: "https://imgproduct.cehome.com//4/20150729/4LGZjwzGHif1438156941LczN4hBIbI4.png"
name: "奥邦"
},
{
brandId: 6
categoryId: 5
enFirstChar: "A"
id: 6
logo: "https://imgproduct.cehome.com/data/brandlogo/1280714691012.jpg"
name: "阿特拉斯中国"
}
]
]








wxml

  
        
          {{index}}
        
        
          
            {{index}}
            
              
                
              
              {{brand.name}}
            
          
        
      


js

data:{
 scrollIntoView: ''
}

  saleBrand({category_id:e.currentTarget.dataset.id}).then(res =>{
        const groups = utils.groupBy(res, 'enFirstChar'); // 转格式
        this.setData({
          newlist:groups
        })
      })

点击事件
    scrollToGroup: function(e) {
      var letter = e.currentTarget.dataset.letter;
      this.setData({
        scrollIntoView: 'group-' + letter
      });
    },




const firstLetter = Object.keys(groups)[0];获取第一个元素的下标


.brand-l {
  height: 80rpx;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #00000019;
}

.brand-l image {
  width: 76rpx;
  height: 50rpx;
  margin-right: 100rpx;
}

.brand-l:nth-last-child(1) {
  border-bottom: none;
}

.spec_1 {
  background-color: #F6F6F6;
  height: 64rpx;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
}

.brand-all {
  position: fixed;
  right: 20rpx;
  font-size: 24rpx;
  
}
.letter {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.letter1 {
  width: 40rpx;
  height: 40rpx;
  background: #DD2330;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;
}