找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序仿通讯录demo

[复制链接]
查看: 430|回复: 59
最佳答案
0 

1

主题

1

帖子

40

积分

新人求带

积分
40
 楼主| 发表于 2018-9-12 15:15:37 | 显示全部楼层 |阅读模式
话不多说,先上效果图 选项卡

68747470733a2f2f7365676d656e746661756c742e636f6d2f696d672f62566267494c6a3f773d33.gif

因为是使用的手机录屏,视频格式为MP4,上传到文章时发现只支持图片,还好电脑自动录屏功能,所以简单的录制了一下,完后又提示只能4M,只能再去压缩图片,所以画质略渣,各位客官讲究的看看吧。

特色功能介绍

  • 用户只需按照格式传入参数,组件能够自动将参数按首字母分组,简单方便;
  • 组件右侧首字母导航无需另外传值,并且根据参数具体有哪些首字母显示(没有的咱就不要);
  • 用户进行上下滑动时,左右相互联动;
  • 点击右侧导航,组件会相应的上下滚动。


实现基础

说到滚动当然少不了小程序的基础组件scroll-view,该组件就是在此基础上实现的; 监听组件scroll-view的bindscroll事件,进而对组件数据进行操作,即可完成。

Wxml

滚动区域
  1. <scroll-view scroll-y style="height:100%;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
  2.   <view class="list-group" wx:for="{{logs}}" wx:for-item="group">
  3.     <view class="title" id="{{group.title}}">{{group.title}}</view>
  4.     <block wx:for="{{group.items}}" wx:for-item="user">
  5.       <view id="" class="list-group-item">
  6.         <image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
  7.         <text class="log-item">{{user.name}}</text>
  8.       </view>
  9.     </block>
  10.   </view>
  11. </scroll-view>
复制代码

简单说一下上述代码:根据小程序文档,在使用scroll-view组件用于竖向滚动时一定要设置高度,你们可以看到我在代码中设置了'height:100%;'这就实现了组件的滚动高度是整个页面。 但是请注意:很多同学会发现设置了高度100%后,组件并没有效果,这是因为你没有将页面高度设置为100%,所以你还需在app.wxss中设置page的高度为100% 其他的属性看文档就好,我就不再多说;

2.侧边字母导航
  1. <view class="list-shortcut">
  2.   <block wx:for="{{logs}}">
  3.     <text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
  4.   </block>
  5. </view>
复制代码

3.固定在顶部的字母导航

仔细的同学能发现在滚动时,顶部有一个固定位置的字母导航,其值对应滚动到的区域
  1. <view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
  2.     <view class="fixed-title">
  3.       {{fixedTitle}}
  4.     </view>
  5. </view>
复制代码

Wxss

样式太简单了,就不发了,重点看js部分

选项卡

js
拿到参数第一步当然是将参数列表渲染上去啦,
  1. normalizeSinger(list) {
  2.     //歌手列表渲染
  3.     let map = {
  4.       hot: {
  5.         title: this.data.HOT_NAME,
  6.         items: []
  7.       }
  8.     }
  9.     list.forEach((item, index) => {
  10.       if (index < this.data.HOT_SINGER_LEN) {
  11.         map.hot.items.push({
  12.           name: item.Fsinger_name,
  13.           avatar:this.constructor(item.Fsinger_mid)
  14.           })
  15.       }
  16.       const key = item.Findex
  17.       if (!map[key]) {
  18.         map[key] = {
  19.           title: key,
  20.           items: []
  21.         }
  22.       }
  23.       map[key].items.push({
  24.         name: item.Fsinger_name,
  25.         avatar: this.constructor(item.Fsinger_mid)
  26.       })
  27.     })
  28.     let ret = []
  29.     let hot = []
  30.     for (let key in map) {
  31.       let val = map[key]
  32.       if (val.title.match(/[a-zA-Z]/)) {
  33.         ret.push(val)
  34.       } else if (val.title === this.data.HOT_NAME) {
  35.         hot.push(val)
  36.       }
  37.     }
  38.     ret.sort((a, b) => {
  39.       return a.title.charCodeAt(0) - b.title.charCodeAt(0)
  40.     })
  41.     return hot.concat(ret)
  42.   },
复制代码

将用户数据分为两大块,即热门组和不热门组(开个玩笑stuck_out_tongue_closed_eyes),默认将参数的前10组归类为热门组,然后对所以参数安装首字母进行排序分组。 2. 计算各组高度
  1. var lHeight = [],
  2.     that = this;
  3. let height = 0;
  4. lHeight.push(height);
  5. var query = wx.createSelectorQuery();
  6. query.selectAll('.list-group').boundingClientRect(function(rects){
  7.     var rect = rects,
  8.         len = rect.length;
  9.     for (let i = 0; i < len; i++) {
  10.         height += rect[i].height;
  11.         lHeight.push(height)
  12.     }
  13. }).exec();
  14. var calHeight = setInterval(function(){
  15.     if (lHeight != [0]) {
  16.        that.setData({
  17.           listHeight: lHeight
  18.        });
  19.     clearInterval(calHeight);
  20.   }
  21. },1000)
复制代码

在获取元素属性上,小程序提供了一个很方便的api,wx.createSelectotQuery();具体使用方法请看节点信息API 使用该方法获取到各分组的高度,存入lHeight中用于之后滚动时判断使用; 同学们可以看到我在将lHeight赋值给data的listHeight时使用了定时器,这是因为获取节点信息api是异步执行的,顾你直接进行赋值是没有效果的,所以我使用了定时器功能; 我觉得这里使用定时器不是最好的处理方式,同学们有更好的方法请告诉我,谢谢 3.第三步就是在滚动的时候获取滚动高度,相应的处理即可,滚动使用到了scroll-view自带事件,这个事件会返回滚动的距离,及其方便
  1. const listHeight = this.data.listHeight
  2. // 当滚动到顶部,scrollY<0
  3. if (scrollY == 0 || scrollY < 0) {
  4.   this.setData({
  5.     currentIndex:0,
  6.     fixedTitle:''
  7.   })
  8.   return
  9. }
  10. // 在中间部分滚动
  11. for (let i = 0; i < listHeight.length - 1; i++) {
  12.   let height1 = listHeight[i]
  13.   let height2 = listHeight[i + 1]
  14.   if (scrollY >= height1 && scrollY < height2) {
  15.     this.setData({
  16.       currentIndex:i,
  17.       fixedTitle:this.data.logs[i].title
  18.     })
  19.     this.fixedTt(height2 - newY);
  20.     return
  21.   }
  22. }
  23. // 当滚动到底部,且-scrollY大于最后一个元素的上限
  24. this.setData({
  25.   currentIndex: listHeight.length - 2,
  26.   fixedTitle: this.data.logs[listHeight.length - 2].title
  27. })
复制代码

参数格式
  1. list:[
  2.     {
  3.         "index": "X",
  4.         "name": "薛之谦",
  5.     },
  6.     {
  7.         "index": "Z",
  8.         "name": "周杰伦",
  9.     },
  10.     {
  11.         "index": "B",
  12.         "name": "BIGBANG (빅뱅)",
  13.     },
  14.     {
  15.         "index": "B",
  16.         "name": "陈奕迅",
  17.     },
  18.     {
  19.         "index": "L",
  20.         "name": "林俊杰",
  21.     },
  22.     {
  23.         "index": "A",
  24.         "name": "Alan Walker (艾伦·沃克)",
  25.     },
  26. ]
复制代码

如果你们还需要其他的参数,对应的在后面加上即可。
WxPhone_list-master.zip (6.95 KB, 下载次数: 25)
回复

使用道具 举报

最佳答案
0 

0

主题

9

帖子

120

积分

等待验证会员

积分
120
发表于 2018-9-12 16:11:34 | 显示全部楼层
感谢楼主支持
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

126

帖子

742

积分

略知一二

积分
742
QQ
发表于 2018-9-12 22:11:14 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

256

帖子

2530

积分

专家路上

积分
2530
发表于 2018-9-12 23:24:26 | 显示全部楼层
不错不错
回复

使用道具 举报

最佳答案
0 

0

主题

256

帖子

2530

积分

专家路上

积分
2530
发表于 2018-9-12 23:24:29 | 显示全部楼层
不错不错
回复

使用道具 举报

最佳答案
0 

0

主题

256

帖子

2530

积分

专家路上

积分
2530
发表于 2018-9-12 23:24:31 | 显示全部楼层
不错不错
回复

使用道具 举报

最佳答案
0 

0

主题

256

帖子

2530

积分

专家路上

积分
2530
发表于 2018-9-12 23:24:34 | 显示全部楼层
不错不错
回复

使用道具 举报

最佳答案
0 

0

主题

427

帖子

3945

积分

专家路上

积分
3945
发表于 2018-9-13 07:36:26 来自手机 | 显示全部楼层
感谢分享不错不错
回复 支持 反对

使用道具 举报

发表于 2018-9-13 09:49:06 | 显示全部楼层
不错不错
回复

使用道具 举报

发表于 2018-9-13 09:49:10 | 显示全部楼层
不错不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com