代码拉取完成,页面将自动刷新
由于 jquery-weui 本身没有提供常用通讯录的模块页面 所以这里自己整理一个简易通讯录,实现右侧字母快捷导航功能
因为右侧的字母导航是垂直的排版,并且要撑满整个屏幕,所以在实现上用 flex
进行布局,同时设置 flex-direction
属性为垂直显示,最后设置 justify-content
属性为平均分布
display: flex;
flex-direction: column;
justify-content: space-around;
clientY
值移动端无法直接通过 event.clientY
获取到 clientY
值,需要使用以下方法获取
// 原生 js 的 event 对象
event.changedTouches[0].clientY
// jquery 的 event 对象
event.originalEvent.changedTouches[0].clientY
通过 touch
事件获取到 clientY
值,并通过 clientY
计算出位于字母导航的哪个字母上,再通过字母找到左侧联系人页面对应该字母的标题,最后计算出标题距离页面顶部的偏移值,并用 scrollTop
定位(具体实现看源码)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型