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

2024-05-30 03:13:19

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/wxappunion/blog/826367

两行代码实现微信小程序联系人sidebar相关推荐

api 定位微信小程序精度_一行代码区分微信小程序或QQ小程序
背景很多开发者发现微信小程序的代码作为QQ小程序也能运行,可谓是无缝移植,这点为腾讯开发团队点赞. 但是QQ和微信小程序之间的服务端API有所不同,由此产生了一个需求:判断小程序当前是运行在微信还是 ...
计算机代码图表,微信小程序图表插件(wx-charts)实例代码
微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧支持图表类型饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 ...
java推送微信消息换行_5行代码实现微信小程序模版消息推送（含推送后台和小程序源码）...
我们在做小程序开发时,消息推送是不可避免的.今天就来教大家如何实现小程序消息推送的后台和前台开发.源码会在文章末尾贴出来. 其实我之前有写过一篇:<springboot实现微信消息推送,java ...
c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...
java小程序贪吃蛇代码_微信小程序Demo之贪食蛇
原标题:微信小程序Demo之贪食蛇差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局关于小程序笔者就不做介绍 ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
IVX低代码平台——微信小程序获取用户信息
写在前面小程序可以通过方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系.本文将向大家展示低代码开发:小程序实现获取用户信息的方法,供大家参考. 文章目录写在前面开发概述准备工作用 ...
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
微信抽奖java代码_微信小程序活动助手,包括nodejs后台管理系统和java后台接口
项目描述在一个兼职群接的一个项目,断断续续做了差不多一个月多点,最后不了了之,在这里,给一些想接兼职的小老弟讲讲, 个人想接兼职的话,接一些简单的,半天,一天做完的,钱少点也没关系.规矩要求别太多的 ...

最新文章

热门文章