小程序组件之仿微信通讯录的实现代码
最近模仿微信通信录做了个小程序组件,分享给大家,具体如下:
创新互联自2013年创立以来,先为介休等服务建站,介休等地企业,进行企业商务咨询服务。为介休企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
效果图
因为是使用的手机录屏,视频格式为MP4,上传到文章时发现只支持图片,还好电脑自动录屏功能,所以简单的录制了一下,完后又提示只能4M,只能再去压缩图片,所以画质略渣,各位客官讲究的看看吧。
特色功能介绍
- 用户只需按照格式传入参数,组件能够自动将参数按首字母分组,简单方便;
- 组件右侧首字母导航无需另外传值,并且根据参数具体有哪些首字母显示(没有的咱就不要);
- 用户进行上下滑动时,左右相互联动;
- 点击右侧导航,组件会相应的上下滚动。
实现基础
本组件只使用了小程序基础组件中的scroll-view,不用那么麻烦,简单方便,一看就懂,哈哈哈
wxml
滚动区域
{{group.title}} {{user.name}}
简单说一下上述代码:根据小程序文档,在使用**scroll-view**组件用于竖向滚动时一定要设置高度,你们可以看到我在代码中设置了'height:100%;'这就实现了组件的滚动高度是整个页面。 但是请注意:很多同学会发现设置了高度100%后,组件并没有效果,这是因为你没有将页面高度设置为100%,所以你还需在app.wxss中设置page的高度为100%; 其他的属性看文档就好,我就不再多说;
2.侧面字母导航
{{item.title}}
3.固定在顶部的字母导航
{{fixedTitle}}
js
渲染参数
normalizeSinger(list) { //列表渲染 let map = { hot: { title: this.data.HOT_NAME, items: [] } } list.forEach((item, index) => { if (index < this.data.HOT_SINGER_LEN) { map.hot.items.push({ name: item.Fsinger_name, avatar:this.constructor(item.Fsinger_mid) }) } const key = item.Findex if (!map[key]) { map[key] = { title: key, items: [] } } map[key].items.push({ name: item.Fsinger_name, avatar: this.constructor(item.Fsinger_mid) }) }) let ret = [] let hot = [] for (let key in map) { let val = map[key] if (val.title.match(/[a-zA-Z]/)) { ret.push(val) } else if (val.title === this.data.HOT_NAME) { hot.push(val) } } ret.sort((a, b) => { return a.title.charCodeAt(0) - b.title.charCodeAt(0) }) return hot.concat(ret) },
计算分组高度
var lHeight = [], that = this; let height = 0; lHeight.push(height); var query = wx.createSelectorQuery(); query.selectAll('.list-group').boundingClientRect(function(rects){ var rect = rects, len = rect.length; for (let i = 0; i < len; i++) { height += rect[i].height; lHeight.push(height) } }).exec(); var calHeight = setInterval(function(){ if (lHeight != [0]) { that.setData({ listHeight: lHeight }); clearInterval(calHeight); } },1000)
在获取元素属性上,小程序提供了一个很方便的api,wx.createSelectotQuery();具体使用方法请看[节点信息API][3]
使用该方法获取到各分组的高度,存入lHeight中用于之后滚动时判断使用;
同学们可以看到我在将lHeight赋值给data的listHeight时使用了定时器,这是因为获取节点信息api是异步执行的,顾你直接进行赋值是没有效果的,所以我使用了定时器功能;
**我觉得这里使用定时器不是最好的处理方式,同学们有更好的方法请告诉我,谢谢**
对滚动事件进行处理
const listHeight = this.data.listHeight // 当滚动到顶部,scrollY<0 if (scrollY == 0 || scrollY < 0) { this.setData({ currentIndex:0, fixedTitle:'' }) return } // 在中间部分滚动 for (let i = 0; i < listHeight.length - 1; i++) { let height1 = listHeight[i] let height2 = listHeight[i + 1] if (scrollY >= height1 && scrollY < height2) { this.setData({ currentIndex:i, fixedTitle:this.data.logs[i].title }) this.fixedTt(height2 - newY); return } } // 当滚动到底部,且-scrollY大于最后一个元素的上限 this.setData({ currentIndex: listHeight.length - 2, fixedTitle: this.data.logs[listHeight.length - 2].title })
参数格式
list:[ { "index": "X", "name": "薛之谦", }, { "index": "Z", "name": "周杰伦", }, { "index": "B", "name": "BIGBANG (빅뱅)", }, { "index": "B", "name": "陈奕迅", }, { "index": "L", "name": "林俊杰", }, { "index": "A", "name": "Alan Walker (艾伦·沃克)", }, ]
最后
完整代码请戳 gitHub
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前文章:小程序组件之仿微信通讯录的实现代码
转载来源:http://myzitong.com/article/jhdpii.html