脚本之家

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

上一篇
原创:微信小程序java实现AES解密并获取unionId
下一篇
原创:微信小程序亲测体验,公众号入口曝光!

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

以上就是两行代码实现微信小程序联系人sidebar的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

两行代码实现微信小程序联系人sidebar 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
原创:微信小程序java实现AES解密并获取unionId
下一篇
原创:微信小程序亲测体验,公众号入口曝光!

您可能感兴趣的小程序开发教程

小程序开发

微信小程序中将多个view居中显示的方法

我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 先看一下效果图如下图效果所示:我们需要将“延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的

小程序开发

微信小程序如何居中布局?

前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。 

小程序开发

防止小程序多次点击跳转解决方案

场景在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):解决办法然后从轻松理解JS函数节流和函..

小程序开发

微信小程序-事件

微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。接下来把文档copy过来,原文地址:https://mp.weixin.qq.com