Vue2 实现通讯录联系人选择页面：支持字母导航和实时搜索 从零开始用 Vue2 开发通讯录页面，含分组展示与字母跳转功能 手把手教学：Vue2 实现联系人选择页面，右侧导航 + 搜索功能 Vue2V

于 2024-11-21 18:02:38 发布
阅读量1k 收藏 8
点赞数 31
分类专栏： web前端特效源码 文章标签： javascript vue.js 前端 网页设计 通讯录 联系人 字母导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/143951636
版权

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

功能说明
右侧字母导航：

点击字母时，会跳转到对应首字母分组的联系人位置。
使用 scrollIntoView 方法实现平滑滚动效果。
联系人分组：

按首字母分组展示联系人。
数据动态渲染，支持假数据。
实时搜索：

输入搜索关键词后，自动过滤联系人，按搜索内容动态更新列表。
单选联系人：

支持单选联系人，选中后通过按钮确认。
完成操作提示：

点击【完成】按钮后，会弹出提示，显示选中的联系人信息。
假数据：

使用虚拟联系人数据，支持 A 到 Z 的分组示例。

完整代码


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
vue项目通讯录_vue  自定义组件实现通讯录功能

				
			

			

				

					weixin_31440053的博客
				

				

					12-24
					
					1230
					
				

			

		

		

			
				
在线demo：http://tangyupeng.top/dist/index.html#/phone首页+确认取消import Vue from 'vue';import Vuex from 'vuex';var userData=[{"index":"A","users":[{"name":"a1","tel":"13333333331"},{"name":"a2","tel":"133333...

			
		

	



                

            
              



	

		

			

				
					
vue项目通讯录_vue组件--通讯录

				
			

			

				

					weixin_29505121的博客
				

				

					01-30
					
					1407
					
				

			

		

		

			
				
简介在移动端开发中，通讯录是个很常见的需求。通讯录通常要实现以下功能首字母导航滚动到一定位置首字母固定布局通讯录是典型的上下两栏布局，上面是header，下面是内容区，我们这里采用flexbox来实现。html,body,.page{height: 100%}.page{display: flex}.page-header{height: 44px}.page-content{flex: 1;ov...

			
		

	



              


  
              

                


	

		

			

				
					
vue实现通讯录功能

				
			

			

				

					10-18
				

			

		

		

			
				
主要为大家详细介绍了vue实现通讯录功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
vue写一个通讯录页面

				
			

			

				

					qq_41775006的博客
				

				

					03-31
					
					1665
					
				

			

		

		

			
				
要求：通讯录用户以名字首字母开头进行分类，点击侧边栏首字母滚动到指定首字母开头的用户上
效果图

首先写侧边导航栏部分
template 部分
<div class="navList">
    <div class="navItem" v-for="(item,index) in navList" :key="index" @click="onClickTo(item)">{{item}}</div>
</div>

data 部分
navList:['A'

			
		

	



		

			
		



	

		

			

				
					
vue JS实现类似通讯录的字母索引

				
			

			

				

					芽子的博客
				

				

					04-16
					
					641
					
				

			

		

		

			
				
vue JS实现类似通讯录的字母索引示例话不多说直接上代码
示例

话不多说直接上代码
<template>
  <div class="brand-f-s">
    <el-input
      placeholder="请选择内容"
      v-model="input"
      clearable
      @focus="focus"
      @blur="blur">
    </el-input>
    <div clas

			
		

	





	

		

			

				
					
手机通讯录、城市选择器前端组件-H5、小程序端

				
			

			

				

					01-11
				

			

		

		

			
				
标题中的“手机通讯录、城市选择器前端组件-H5、小程序端”指的是一个专为H5和微信小程序设计的前端组件库，其中包含了用于展示和选择联系人（手机通讯录）以及城市（城市选择器）的功能。这个组件库可能是为了方便...

			
		

	





	

		

			

				
					
北大青鸟Y2项目实战——在线通讯录完整教程

				
			

			

				

					
				

			

		

		

			
				
通过它，学习者可以更好地理解如何从零开始构建一个完整的Web应用程序，包括前端页面设计、后端逻辑处理、数据库设计与优化以及安全性等方面的知识。这不仅能提高学习者的实际编程能力，而且还能让他们了解企业级...

			
		

	





	

		

			

				
					
VB通讯录系统设计与实现：多技术项目源码合集

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息: "基于VB开发的通讯录系统设计与实现(源代码+系统).rar"  此资源包是一个集合了多个技术领域项目源代码和系统的集合体，涉及技术包括前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、...

			
		

	





	

		

			

				
					
基于SSM和Vue的个人事务管理系统开发教程

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"基于SSM的个人...同时，项目中所包含的安装教程和论文指导能够让学习者从零开始逐步了解和掌握整个系统的开发流程，非常适合计算机科学与技术、软件工程等相关专业的学生作为毕业设计或课程学习的参考。

			
		

	





	

		

			

				
					
vue实现通讯录功能，前端面试题10道

				
			

			

				

					2301_78416732的博客
				

				

					03-28
					
					216
					
				

			

		

		

			
				
input type=“button” @click=“add()” value=“添加备忘”/>清空备忘录。🍅 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕。明日需要完成事项：{{contents.length}}件。实现通讯录简单的添加，删除，情况，展示计数等功能。数据已经被清空了哟！

			
		

	





	

		

			

				
					
vue 通讯录向上滑动事件

				
			

			

				

					10-30
				

			

		

		

			
				
第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。

			
		

	





	

		

			

				
					
vue-contacts:在 vue 中实现类似通讯录的功能

				
			

			

				

					05-15
				

			

		

		

			
				
接触者
在vue中实现类似通讯录的功能
构建设置
 # install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report

			
		

	





	

		

			

				
					
模仿钉钉写的一个选择每个步骤的审核人的插件

				
			

			

				

					01-26
				

			

		

		

			
				
模仿钉钉写的一个选择每个步骤的审核人的插件，比如公文流转，要选择每个步骤审核人，然后再一次性提交。我写了三个版本，一个是调用jquery+function，还有一个是jquery+obj，一个jquery封装为插件。测试可以使用。

			
		

	





	

		

			

				
					
vue实现通讯录

				
			

			

				

					qq_35504206的博客
				

				

					03-20
					
					7588
					
				

			

		

		

			
				
vue实现手机通讯录功能：&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;动态加载组件&lt;/title&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;meta name="viewport" content="width=device-width

			
		

	





	

		

			

				
					
使用vue模拟通讯录列表,对中文名拼音首字母提取并排序

				
			

			

				

					m0_64590669的博客
				

				

					08-09
					
					7808
					
				

			

		

		

			
				
使用vue模拟通讯录列表,对中文名拼音首字母提取并排序

			
		

	





	

		

			

				
					
vue3+ts实现仿微信通讯录A-Z排序以及导航栏的功能

					
最新发布

				
			

			

				

					weixin_51313691的博客
				

				

					04-03
					
					1195
					
				

			

		

		

			
				
需要实现一个通讯录的功能很简单，只需要在后端将用户名查询出来返回给前端展示就好，但是要按照A-Z排序就稍稍复杂了一点，要考虑用户名为中文、英文、数字等特殊字符的如何进行排序，仿照微信的话，数字以及特殊字符的归于‘#’类，排在最后。提示：以下是本篇文章正文内容，下面案例可供参考刚学vue3+ts，代码不规范的地方请谅解，也可以帮忙修改完善一下~相互学习进步封装一个类似微信通讯录带有字母检索功能的vue组件_vue 前端 通讯录-优快云博客。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
南北极之间

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值