vue3-uniapp，如何自定义搜索列表导航且设置首字母

最新推荐文章于 2024-07-26 16:15:39 发布

范闲~

最新推荐文章于 2024-07-26 16:15:39 发布

阅读量319

点赞数

分类专栏： uniapp 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_60708088/article/details/125289720

版权

本文详细介绍了如何在Vue3和UniApp中创建一个自定义的搜索列表，同时讲解了如何实现列表项的首字母导航功能，提升用户体验。通过结合vue.js的响应式特性、ElementUI组件库以及javascript的字符串处理方法，来构建高效且易用的搜索功能。

摘要由CSDN通过智能技术生成

 <div class="unilist">
            <view class="address-book-container">
                <scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="data.toView" scroll-with-animation="true">
                    <view class="address-book" v-for="(item, index) in addressBooks" :key="index" :id="item.id" >
                        <view class="address-book-index">{
  { item.id }}</view>
                        <div class="teacher" v-for="(igs,index) in item.datas" :key="index">
                            <div class="lefttitle"> {
  {igs.name}}</div>
                            <div class="kec">课程:</div>
                            <div class="kecshu">{
  {igs.course_num}} </div>
                            <image src="../../../static/pagesB/我的 – 1_slices/组 53088@3x(2).png" mode="" class="xiantou"></image>
                        </div>
                    </view>
                </scroll-view>
                <view class="letter-nav">