更新记录

2.0.0（2025-12-04） 下载此版本

优化了, 好用一些了, 增加了注释, 添加了 父级滚动盒子和锚点前缀 属性

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

yy-a-z 字母索引,字母索引用去来还是挺丝滑的,剔除[A-Z]中不存在的字母索引

<template>
  <view class="page">
    <view id="home" class="list-wrapper">
      <view
        v-for="section in sectionList"
        :key="section.letter"
        class="section"
      >
        <view
          class="section-title"
          :id="'index_' + section.letter"
        >
          {{ section.letter }}
        </view>
        <view
          v-for="item in section.data"
          :key="item.id"
          class="section-item"
          @tap="onItemTap(item)"
        >
          <view class="item-name">{{ item.name }}</view>
          <view class="item-desc">{{ item.desc }}</view>
        </view>
      </view>
    </view>

    <!-- 右侧 A~Z 索引组件 -->
    <yy-a-z
      :comList="comList"
      @new_list_arr="onNewListArr"
    />
  </view>
</template>

<script>
export default {

  data() {
    return {
      // 原始联系人列表（可以改成接口返回）
      rawList: [
        { id: 1, name: 'Apple 公司',   desc: '科技',     },
        { id: 2, name: '阿里巴巴',     desc: '电商',     },
        { id: 3, name: 'Baidu',       desc: '搜索',     },
        { id: 4, name: 'ByteDance',   desc: '内容平台', },
        { id: 5, name: 'China Mobile',desc: '运营商',   },
        { id: 6, name: '腾讯',        desc: '互联网',   },
        { id: 7, name: '滴滴出行',    desc: '出行',     },
        { id: 8, name: 'JD 京东',     desc: '电商',     },
        { id: 9, name: 'Meituan 美团',desc: '本地生活', },
        { id: 1, name: 'Apple 公司',   desc: '科技',     },
        { id: 2, name: '阿里巴巴',     desc: '电商',     },
        { id: 3, name: 'Baidu',       desc: '搜索',     },
        { id: 4, name: 'ByteDance',   desc: '内容平台', },
        { id: 5, name: 'China Mobile',desc: '运营商',   },
        { id: 6, name: '腾讯',        desc: '互联网',   },
        { id: 7, name: '滴滴出行',    desc: '出行',     },
        { id: 8, name: 'JD 京东',     desc: '电商',     },
        { id: 9, name: 'Meituan 美团',desc: '本地生活', },
        { id: 1, name: 'Apple 公司',   desc: '科技',     },
        { id: 2, name: '阿里巴巴',     desc: '电商',     },
        { id: 3, name: 'Baidu',       desc: '搜索',     },
        { id: 4, name: 'ByteDance',   desc: '内容平台', },
        { id: 5, name: 'China Mobile',desc: '运营商',   },
        { id: 6, name: '腾讯',        desc: '互联网',   },
        { id: 7, name: '滴滴出行',    desc: '出行',     },
        { id: 8, name: 'JD 京东',     desc: '电商',     },
        { id: 9, name: 'Meituan 美团',desc: '本地生活', },
        { id: 1, name: 'Apple 公司',   desc: '科技',     },
        { id: 2, name: '阿里巴巴',     desc: '电商',     },
        { id: 3, name: 'Baidu',       desc: '搜索',     },
        { id: 4, name: 'ByteDance',   desc: '内容平台', },
        { id: 5, name: 'China Mobile',desc: '运营商',   },
        { id: 6, name: '腾讯',        desc: '互联网',   },
        { id: 7, name: '滴滴出行',    desc: '出行',     },
        { id: 8, name: 'JD 京东',     desc: '电商',     },
        { id: 9, name: 'Meituan 美团',desc: '本地生活', },
        { id: 1, name: 'Apple 公司',   desc: '科技',     },
        { id: 2, name: '阿里巴巴',     desc: '电商',     },
        { id: 3, name: 'Baidu',       desc: '搜索',     },
        { id: 4, name: 'ByteDance',   desc: '内容平台', },
        { id: 5, name: 'China Mobile',desc: '运营商',   },
        { id: 6, name: '腾讯',        desc: '互联网',   },
        { id: 7, name: '滴滴出行',    desc: '出行',     },
        { id: 8, name: 'JD 京东',     desc: '电商',     },
        { id: 9, name: 'Meituan 美团',desc: '本地生活', },
      ],

      comList: [],
      sectionList: [],
    }
  },

  onLoad() {
    this.initComList()
  },

  methods: {

    getFirstLetter(name) {
      if (!name) return '#'
      const firstChar = String(name).trim().charAt(0)
      if (/[A-Za-z]/.test(firstChar)) {
        return firstChar.toUpperCase()
      }
      return '#'
    },
    initComList() {
      this.comList = this.rawList.map((item) => ({
        ...item,
        first: this.getFirstLetter(item.name),
      }))
    },

    onNewListArr(list) {
      this.sectionList = list
    },
    onItemTap(item) {
      console.log('点击条目：', item)
      uni.showToast({
        title: item.name,
        icon: 'none',
      })
    },
  },
}
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.list-wrapper {
  padding: 20rpx 24rpx 40rpx;
}

.section {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 26rpx;
  font-weight: 700;
  color: #666;
  padding: 10rpx 0;
}

.section-item {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-top: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

  .item-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #222;
    margin-bottom: 6rpx;
  }

  .item-desc {
    font-size: 24rpx;
    color: #888;
  }
}
</style>