是按字母顺序ABCD等排开然后进行字母顺序的索引，右侧有26字母顺序，像手机通讯录，加上搜索框

非常抱歉，我之前的回答理解有误下面是按字母顺序排列的通讯录示例，包括索引、搜索框和点击跳转到聊天页面的功能。

代码如下：

<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>
    <view class="search-container">
      <input class="search-input" v-model="searchKeyword" placeholder="搜索联系人" />
      <button class="search-button" @click="searchContact">搜索</button>
    </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: '',
      searchKeyword: '',
    };
  },
  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() {
      // 添加联系人的逻辑
    },
    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) {
      // 跳转到聊天页面的逻辑
    },
    scrollToGroup(group) {
      this.scrollIntoView = `group-${group}`;
    },
    searchContact() {
      const keyword = this.searchKeyword.trim().toUpperCase();
      if (keyword === '') {
        this.groupContacts = this.groupContactsByAlphabet(this.contacts);
        this.contactGroups = Object.keys(this.groupContacts).sort();
      } else {
        const filteredContacts = this.contacts.filter((contact) =>
          contact.name.toUpperCase().includes(keyword)
        );
        this.groupContacts = this.groupContactsByAlphabet(filteredContacts);
        this.contactGroups = Object.keys(this.groupContacts).sort();
      }
    },
  },
};
</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;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  border: 1rpx solid #999999;
}

.search-button {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 10rpx;
  font-size: 28rpx;
  background-color: #007aff;
  color: #ffffff;
}

.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>

请将上述代码保存为 `ContactList.vue` 文件，并放置在相应的位置。然后在你的页面中引用这个组件即可。

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