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

最新推荐文章于 2024-06-20 20:20:21 发布

呱嗨喵

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量68

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/YUlangML/article/details/132345869

版权

数组格式
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

  <scroll-view scroll-y="true" style="height:calc(100vh - 138px - {{CustomBar}})" scroll-into-view="{{scrollIntoView}}" scroll-top="0">
        <view class="brand-all">
          <view wx:for="{{newlist}}" wx:key="index" bindtap="scrollToGroup" data-letter="{{index}}">{{index}}</view>
        </view>
        <view wx:for="{{newlist}}" wx:key="index">
          <view id="{{'group-' + index}}" class="group">
            <view class="spec_1">{{index}}</view>
            <view wx:for="{{newlist[index]}}" wx:for-item="brand" wx:key="index" class="brand-l flex align-center">
              <view>
                <image src="{{brand.logo}}" />
              </view>
              <view>{{brand.name}}</view>
            </view>
          </view>
        </view>
      </scroll-view>


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;
}