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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


在做微信小程序新版本的时候,如何提醒用户更新? 今天分享一个关于微信小程序发布新版本提示用户更新代码
本文小编为大家详细介绍“微信小程序如何设置字体样式”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序如何设置字体样式”文章能帮助大家解决疑惑...
这篇文章主要介绍了微信小程序picker选择器获取值的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序picker...
本篇内容介绍了“微信小程序选择器组件picker怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处...
本篇内容主要讲解“在微信小程序中怎么使用three.js”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“在微信小程...
这篇文章主要讲解了“uni-app开发微信小程序之H5压缩上传图片的问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入...
      大家熟悉微信小程序查询地理经纬位置吗?晓得微信小程序查询地理经纬位置的操作吗?下文就带来了微信小程序查询地理经纬位置的操作教程,一起来看看吧
      今日就快来学习本文中微信小程序收款通知设置方法的操作过程吧,相信在以后的使用中一定会得心应手的
      当前使用微信小程序类软件的朋友越来越来多,那么若想知道wifi密码查看器官方版小程序的使用,该如何操作的呢?接下来分享关于wifi密码查看器官方版小程序的使用的操作步骤。
      相信许多网友对微信都熟悉的,手机必装的一款应用,那大家知道在微信小程序里手持弹幕玩法吗?下文小编就带来了微信手持弹幕玩法的简单教程,有需要的朋友一起来看看吧
      不少朋友都喜欢使用微信小程序软件,那么大家知道快速制作微信小程序方法的简单操作吗?若还不了解,就来学习学习制作微信小程序方法教程吧,10分钟就能搞定
      有些人在使用微信时,还不了解微信怎么制作二维码表白的操作,下面小编就讲解使用微信制作二维码表白的操作方法吧,单身朋友赶快Get起来吧
      不少朋友都喜欢使用微信小程序,那么大家清楚微信小程序可以直接玩斗地主游戏的操作吗?若还不了解,就来学习学习利用微信小程序玩斗地主游戏教程吧!
      现在用手机里小程序的人越来越多,各种生活小软件应有尽有,下面小编就给大家分享一波微信小程序,好看+好用+精致,希望给大家带来帮助。
      微信想必大家都很熟悉,它是现在最大的社交软件,大家或许不知道微信小程序里有个好物圈,那么今天小编就带大家学习微信好物圈的具体操作,希望能够帮助到大家呢
      大家知道如何利用微信小程序转换PDF文档吗?下文小编就带来了在利用微信小程序转换PDF文档的简单使用教程,一起来看看吧!
      微信小程序现在是越来越受大家欢迎,现在很多朋友都喜欢使用微信小程里的换算工具.不过部份朋友还不清楚小程序里换算工具使用方法,今天小编要为大家分享一个微信超强换算工具一起来看看吧!
      想必刚刚入手微信小程序的朋友,还不太了解微信成语猜猜看怎么进入,小编今天就带来关于微信小程序成语猜猜看打开方法的操作步骤,感兴趣的小伙伴们一起学习一下吧!
      有些用户在使用微信小程序时,还不了解微信小程序如何修改用户名称,下面小编就讲解修改微信小程序的名称的操作方法,有需要的小伙伴一起来学习吧,详细流程奉上
      当前互联网发展迅速,整个用户设备不断的在变化,生态也接连变化,所以可以这样说,智能小程序已经成为一个必然的选择。