可以按字母顺序进行索引，类似于微信

要实现按字母顺序进行索引的功能，可以对联系人列表进行分组，每个分组对应一个字母索引。下面是修改后的代码示例：

<template>
  <view class="container">
    <view class="title">通讯录</view>
    <view class="index-bar">
      <view
        class="index-item"
        v-for="(group, index) in contactGroups"
        :key="index"
        @click="scrollToGroup(group)"
      >
        {{ group }}
      </view>
    </view>
    <scroll-view class="contact-list" scroll-y :scroll-into-view="scrollIntoView">
      <view class="contact-group" v-for="(group, index) in contactGroups" :key="index">
        <view class="group-title">{{ group }}</view>
        <view
          class="contact-item"
          v-for="(contact, idx) in groupContacts[group]"
          :key="idx"
          @click="goToChatPage(contact)"
        >
          <view class="contact-info">
            <view class="contact-name">{{ contact.name }}</view>
            <view class="contact-phone">{{ contact.phone }}</view>
          </view>
          <button class="contact-delete" @click.stop="deleteContact(contact)">删除</button>
        </view>
      </view>
    </scroll-view>
    <button class="add-contact" @click="addContact">添加联系人</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        { name: '张三', phone: '13888888888' },
        { name: '李四', phone: '13999999999' },
        { name: '王五', phone: '13666666666' },
      ],
      contactGroups: [],
      groupContacts: {},
      scrollIntoView: '',
    };
  },
  created() {
    this.groupContacts = this.groupContactsByAlphabet(this.contacts);
    this.contactGroups = Object.keys(this.groupContacts).sort();
  },
  methods: {
    groupContactsByAlphabet(contacts) {
      const groups = {};
      contacts.forEach((contact) => {
        const firstLetter = contact.name[0].toUpperCase();
        if (!groups[firstLetter]) {
          groups[firstLetter] = [];
        }
        groups[firstLetter].push(contact);
      });
      return groups;
    },
    addContact() {
      uni.navigateTo({
        url: '/pages/addContact/addContact',
      });
    },
    deleteContact(contact) {
      const group = contact.name[0].toUpperCase();
      const index = this.groupContacts[group].findIndex((c) => c.name === contact.name);
      if (index > -1) {
        this.groupContacts[group].splice(index, 1);
        if (this.groupContacts[group].length === 0) {
          delete this.groupContacts[group];
          this.contactGroups.splice(this.contactGroups.indexOf(group), 1);
        }
      }
    },
    goToChatPage(contact) {
      // 在这里实现跳转到聊天页面的逻辑
      // 示例：uni.navigateTo({ url: '/pages/chatPage/chatPage?contact=' + JSON.stringify(contact) });
    },
    scrollToGroup(group) {
      this.scrollIntoView = `group-${group}`;
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  text-align: center;
}

.index-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.index-item {
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #007aff;
}

.contact-list {
  height: calc(100vh - 250rpx);
}

.contact-group {
  margin-bottom: 20rpx;
}

.group-title {
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #999999;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 28rpx;
  margin-bottom: 6rpx;
}

.contact-phone {
  font-size: 24rpx;
  color: #999999;
}

.contact-delete {
  font-size: 24rpx;
  color: #ff0000;
}

.add-contact {
  margin-top: 20rpx;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 28rpx;
  background-color: #007aff;
  color: #ffffff;
}
</style>

这次的修改添加了一个索引栏 `index-bar`，用于显示字母索引。点击索引栏上的字母可以滚动到对应的分组。

注意其中的 `scroll-view` 组件和相关的样式，用于实现滚动效果。

希望这次的修改满足了你的需求。如果还有其他问题，请随时提问！