使用Mint UI 的Index List 制作通讯录功能

最新推荐文章于 2025-06-23 23:02:57 发布

勋勋勋勋小勋勋

最新推荐文章于 2025-06-23 23:02:57 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： Mint UI Index List 通讯录

本文链接：https://blog.youkuaiyun.com/qq_34607371/article/details/86346991

本文介绍了如何借助Mint UI中的Index List组件来创建一个功能完善的通讯录。通过示例代码和最终展示的效果图，详细阐述了实现过程，包括.vue文件和.ts文件的配置和使用。

效果图

.vue

<mt-index-list>
            <mt-index-section
              v-for="(lettersort, index) in lettersSort"  // 主要代码
              :key="index"
              :index="lettersort.Letter"
            >
              <div
                class="van-hairline--bottom outer_div"
                v-for="(item, index) in lettersort.data"  // 主要代码
                :key="index"
                @click="goPersonDatails(item)"
              >
                <van-row style="height: 60px;" type="flex" align="center">
                  <van-col span="3" offset="1">
                    <img class="headPortrait" src="../../../assets/img/headPortrait.png">
                  </van-col>
                  <van-col span="12" offset="1">
                    <d