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

dongfangyiyu 发布于2019-08-05 17:52 / 2822人阅读

摘要：七后记过程最近微信小程序很火爆，我也尝试着做个天气软件试试手，在做到城市列表的时难倒我了首先了解的属性，把一个值赋给这个属性，那么对应值的组件就会置顶在的顶部，举例如果赣州这个的是，那你把的值设置成，那一打开赣州就会出现在顶部。

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

idc机房托管混合云微信小程序技术实现微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60081.html

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

摘要：七后记过程最近微信小程序很火爆，我也尝试着做个天气软件试试手，在做到城市列表的时难倒我了首先了解的属性，把一个值赋给这个属性，那么对应值的组件就会置顶在的顶部，举例如果赣州这个的是，那你把的值设置成，那一打开赣州就会出现在顶部。作者：Z帅来袭来自：授权地址转自：微信小程序联盟话不多说，先给你们看看核心数据和结构：一、数据： city的json array，letter的arra...

cnTomato 2019-08-21 15:06 评论0 收藏0
两行代码实现微信小程序联系人sidebar

摘要：七后记过程最近微信小程序很火爆，我也尝试着做个天气软件试试手，在做到城市列表的时难倒我了首先了解的属性，把一个值赋给这个属性，那么对应值的组件就会置顶在的顶部，举例如果赣州这个的是，那你把的值设置成，那一打开赣州就会出现在顶部。作者：Z帅来袭来自：授权地址转自：微信小程序联盟话不多说，先给你们看看核心数据和结构：一、数据： city的json array，letter的arra...

RayKr 2019-08-14 17:15 评论0 收藏0
微信小程序require 引用 BASE64.JS 失败问题的分析解决

摘要：问题有朋友问微信小程序文件时，会失败分析事实上，微信小程序很多模块都有不兼容现象。。。，被微信小程序初始化时，指针为空，处理避开这类访问。问题有朋友问, 微信小程序require (base64.js)文件时，会失败,,, 分析事实上，微信小程序require很多JS模块都有不兼容现象。。。先从base64.js这个模块入手吧。调试出错点: (function(global) ...

airborne007 2019-08-20 12:31 评论0 收藏0
微信小程序模板介绍

摘要：文章来源地址一目录结构主要存放组件模块，可自行添加。组件需要在页面里的文件下配置组件路径，如下标题封装了公共的模板，可以看到以下这些文件请求封装请求签名参数域名环境控制正则匹配验证公共方法主要是用来解析。微信小程序开发文档文章来源：www.bookcss.com/note/12/19 github地址：github.com/hwgq2005/xc… 一、目录结构 ├── compone...

Jenny_Tong 2019-05-22 17:59 评论0 收藏0
【微信小程序】采坑之scroll-view组件

摘要：使用中文类的组件时候也就是需要呈现中文的组件，不限于组件是会自动换行的，这时候需求在中强制不换行。在使用非中文组件时候就一切正常。至于为啥使用中文组件会有一部分留白，这个我不知道是个例还是，反正只需要用相对定位移一下就可以了。一、摘要　　今天在使用scroll-view组件的时候发现结果跟预想的不一样。其实也不是第一次用了，同样的写法却出现了意料之外的效果，所以认定是bug了。博主使用...

张宪坤 2019-04-23 13:23 评论0 收藏0