文档章节

两行代码实现微信小程序联系人sidebar

扶桑木下
 扶桑木下
发布于 2017/01/17 12:04
字数 623
阅读 60
收藏 0

作者:Z帅来袭

来自:授权地址

转自:微信小程序联盟

 

一、数据:

city的json array,letter的array

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

 

 

二、布局:

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

三、sidebar布局

让sidebar-item的id为当前字母

 

四、设置sidebar距离顶部50px,设置sidebar的Item为固定20px

.sideBar {
  width: 5%;
  margin-top: 50px;
}

.sideBar-item {
  height: 20px;
}

 

五、在sidebar上添加事件bindtouchmove

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

   var pageY = 在touchmove事件e中获得pageY 

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

   var letter = charArray[letterIndex];

实际代码:

let letterIndex = (e.changedTouches["0"].pageY- 50) / 20;
   let letter = this.data.letterArray[letterIndex - 1];

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

 

六、通过scroll-view的一个属性来让字母置顶在scroll-view:scroll-to-view,可以把他的值设置为一个id

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的位置。

本文转载自:http://www.cnblogs.com/zsmart/p/6277075.html

扶桑木下
粉丝 22
博文 21
码字总数 16778
作品 0
武汉
程序员
私信 提问
wordpress如何添加调用侧边栏小工具功能

wordpress如何添加侧边栏小工具功能? 进入后台的外观-小工具,如果出现以下提示,则表示你的wordpress主题还没有添加小工具: 在主题文件夹下的functions.php文件中添加以下代码: function...

李佳顺
2013/01/11
5.3K
0
css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是...

furw
2015/08/26
120
0
5 种常用布局的 flex 实现

Sticky Footer 经典的上-中-下布局。 当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方 demo link Fixed-Width Si...

meikidd
2017/11/29
0
0
js 鼠标事件 不知道哪里错

我想实现一个功能鼠标单击一次,下拉列表显示,再单击一次该列表隐藏。写了如下代码,列表可以显示,但无法隐藏,求教 function mClick(){ if(document.getElementById("sidebar-dock").styl...

小栗子hl
2014/12/15
173
5
css 高手进,运行代码后右边空白填写相应人的信息。

张三 张三 Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit. 李四 Aliquam libero Consectetuer adipiscing elit Metus aliquam pell......

yuanxu_zhao
2012/03/23
532
2

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB系列-解决面试中可能遇到的MongoDB复制集(replica set)问题

关注我,可以获取最新知识、经典面试题以及微服务技术分享   MongoDB复制集(replica set):MongoDB复制集维护相同数据集的一组mongod进程,复制集是生产部署的基础,具有数据冗余以及高可用...

ccww_
32分钟前
4
0
SpringBoot系列:Spring Boot集成Spring Cache,使用RedisCache

前面的章节,讲解了Spring Boot集成Spring Cache,Spring Cache已经完成了多种Cache的实现,包括EhCache、RedisCache、ConcurrentMapCache等。 这一节我们来看看Spring Cache使用RedisCache。...

杨小格子
41分钟前
3
0
OpenJDK之CountDownLatch

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CountDownLatch是Doug Lea在JDK1.5中引入的,作用就不详细描述了, await()方法,如果还有线程在执行,那么当前线程...

克虏伯
47分钟前
4
0
简单编程

1.编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include<stdio.h>int main(){char name[3];char family[3];printf("Please input your name and family:\n...

电子工程197沈志初
51分钟前
4
0
详解Mysql分布式事务XA(跨数据库事务)

在开发中,为了降低单点压力,通常会根据业务情况进行分表分库,将表分布在不同的库中(库可能分布在不同的机器上)。在这种场景下,事务的提交会变得相对复杂,因为多个节点(库)的存在,可...

slagga
56分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部