话不多说,先给你们看看核心数据和结构:

一、数据:

city的json array,letter的array

(city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得city_en的第一个字符来自动添加,但是为了赢得了性能我舍弃了灵活性)

二、布局:左边是scollview,右边是sidebar,这个布局要是布不好,可以先去了解下“flex布局”

三、sidebar布局,让sidebar-item的id为letter

四、设置sidebar距离顶部50px,设置sidebar的Item为固定20px,这个是必须的

五、在sidebar上添加事件bindtouchmove,这个事件可以获取当前手指触摸的位置(主要是获得距离屏幕顶部的pageY),下面是思路

   var pageY = 在touchmove事件中获得pageY 

     var letterIndex = (pageY - sidebar距离顶部的50px)/sidebar item的高度20px

   var letter = charArray[letterIndex];

  在此,已经获得了你手指触摸的letter了

六、scrollview的属性:scroll-to-view,可以把他的值设置为一个id,那么,scrollview的顶部就会对齐这个组件

scrollview的ABCD等索引的ID实际上就是ABCD本身,那么,把第四点获得的letter通过this.setData({toview:letter});

至此,触摸sidebar就可以看到列表通过触摸在变化。

七、后记过程:

最近微信小程序很火爆,我也尝试着做个天气软件试试手,在做到城市列表的sidebar时难倒我了

首先了解scrollview的scroll-to-view属性,把一个ID值赋给这个属性,那么对应ID值的组件就会置顶在scrollview的顶部,举例:

如果“赣州”这个item的id是ganzhou,那你把scroll-to-view的值设置成ganzhou,那scrollview一打开赣州就会出现在顶部。

接着,研究微信小程序的“事件”,微信小程序的事件有以下这些

在一个个尝试后,发现touchmove是最适合自己的,我原本想的是,

既然touchmove事件会返回touch位置的组件信息,那么我就可以根据组件获得ID值,把ID的值再赋给scoll-to-view,

但是实际上不是我想的这样,他不断返回的都是我手指最开始触摸位置的组件。

最后,我就琢磨让sidebar和sidebar item的位置固定,通过计算获得letter的位置。

两行代码实现微信小程序联系人sidebar的更多相关文章

  1. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  2. 微信小程序之 SideBar(侧栏分类)

    项目目录: 模拟数据: utils / data.js function getSData() { var data = [ { "id": 1, "tree" ...

  3. 17行代码解决微信小程序图片延迟加载

    js 页面 Page({ data: { realScrollTop: 0,//页面滚动距离 driveHeight //屏幕高度可初始化设置 }, scroll(e){ if(e.detail.sc ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 当微信小程序遇到AR(三)

    当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...

  6. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  7. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  8. 支持语音识别、自然语言理解的微信小程序(“遥知之”智能小秘)完整源码分享

    记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...

  9. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

随机推荐

  1. TCP/IP协议栈与数据包封装+TCP与UDP区别

    ISO制定的OSI参考模型的过于庞大.复杂招致了许多批评.与此对照,由技术人员自己开发的TCP/IP协议栈获得了更为广泛的应用.如图2-1所示,是TCP/IP参考模型和OSI参考模型的对比示意图. T ...

  2. js optimization and performance

    http://www.codeproject.com/Articles/551733/Walkthrough-3aplusUsingplustheplusRequireJSplusOpt http:/ ...

  3. Hibernate中cascade作用

    Hibernate中cascade作用 只有“关系标记”才有cascade属性: 一个操作因级联cascade可能触发多个关联操作.前一个操作叫“主控操作”,后一个操作叫“关联操作”. cascade ...

  4. 论文阅读笔记二十:LinkNet: Exploiting Encoder Representations for Efficient Semantic Segmentation(CVPR2017)

    源文网址:https://arxiv.org/abs/1707.03718 tensorflow代码:https://github.com/luofan18/linknet-tensorflow 基于 ...

  5. ZooKeeper和Curator相关经验总结

    一.关于ZooKeeper的watch用法,需要注意 详细说明如下: ZooKeeper Watches All of the read operations in ZooKeeper - getDa ...

  6. 利用js键盘事件制作会移动效果

    会移动的方块 描述 按键盘上的方向键方块会移动,按住alt键和方向键进行大幅度移动 <!DOCTYPE html> <html lang="en"> < ...

  7. Spark项目之电商用户行为分析大数据平台之(十二)Spark上下文构建及模拟数据生成

    一.模拟生成数据 package com.bw.test; import java.util.ArrayList; import java.util.Arrays; import java.util. ...

  8. Java基础-异常(Exception)处理

    Java基础-异常(Exception)处理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.异常的概述 什么是异常?Java代码在运行时期发生的问题就是异常.在Java中,把异 ...

  9. BZOJ4978: [Lydsy1708月赛]泛化物品(乱搞)

    4978: [Lydsy1708月赛]泛化物品 Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 220  Solved: 70[Submit][Statu ...

  10. javascript animation lib greensock gsap介绍

    一般前台做动画有以下几种方式: 1. 简单的css transition动画; 2. css animation动画 3. javascript库动画 一般来说css html5动画只适用于简单的形变 ...