vue写一个通讯录页面

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

效果图

首先写侧边导航栏部分

template 部分

<div class="navList"><div class="navItem" v-for="(item,index) in navList" :key="index" @click="onClickTo(item)">{{item}}</div>
</div>

data 部分

navList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'], //侧边栏

methods 部分

// 点击跳转指定位置onClickTo(item){let to = 0for(let i in this.stuList){if(item == this.stuList[i].initialName){to = 1}}if(to == 1){var PageId = document.querySelector('#' + item)//  滚动到指定位置 - 动画window.scrollTo({'top': PageId.offsetTop,'behavior': 'smooth'})}else{this.$toast({message:'没有姓名首字母为' + item + '的学生哦',duration:1000})}},

css部分(sass)

.navList{position: fixed;right: 0;top: 70px;width: 25px;background: #F6F8FA;padding-top: 20px;padding-bottom: 13px;.navItem{text-align: center;color: #ABB1B8;font-size: 15px;margin-bottom: 9px;}}

剩下的用户列表就不详细给了，只需要每个div的 id 动态绑定一下就行了

vue写一个通讯录页面相关推荐

使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...
使用Vue写一个登陆页面并在管理页面查看和修改
注册页面代码如下 html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ...
python关于通讯录模型_python写一个通讯录 - wtwexile - 博客园
python写一个通讯录闲着没事,用python写一个模拟通讯录,要求要实现常用的通讯录的功能,基本流程如下接下来就按照这个流程实现各个模块的功能 1. 定义一个类,并初始化 1 import j ...
使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时,遇到这个问题: 使用vue写的h5页面,在iOS中,需要等一会才能获取焦点百度一波,下载了一个 fastclick-hvue npm install fastclick-hvue --sav ...
python写一个通讯录step by step V3.0
python写一个通讯录step by step V3.0 更新功能: 数据库进行数据存入和读取操作字典配合函数调用实现switch功能其他:函数.字典.模块调用注意问题: 1.更优美的格式化输 ...
python写一个通讯录V2.0
python写一个通讯录step by step V2.0 引用知识 list + dict用于临时存储用户数据信息 cPickle用于格式化文件存取依旧使用file来进行文件的存储解决问题 1. ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
[js] 写一个获取页面中所有checkbox的方法
[js] 写一个获取页面中所有checkbox的方法 function getAllCheckbox() {return [...document.querySelectorAll('input[ty ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...

vue写一个通讯录页面

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

效果图

首先写侧边导航栏部分

vue写一个通讯录页面相关推荐

最新文章

热门文章