小程序组件之仿微信通讯录的实现代码


Posted in Javascript onSeptember 12, 2018

最近模仿微信通信录做了个小程序组件,分享给大家,具体如下:

效果图

小程序组件之仿微信通讯录的实现代码

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

特色功能介绍

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

 实现基础

本组件只使用了小程序基础组件中的scroll-view,不用那么麻烦,简单方便,一看就懂,哈哈哈

wxml

滚动区域

<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}}">
 <view class="list-group" wx:for="{{logs}}" wx:for-item="group">
  <view class="title" id="{{group.title}}">{{group.title}}</view>
  <block wx:for="{{group.items}}" wx:for-item="user">
   <view id="" class="list-group-item">
    <image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
    <text class="log-item">{{user.name}}</text>
   </view>
  </block>
 </view>
</scroll-view>

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

2.侧面字母导航

<view class="list-shortcut">
 <block wx:for="{{logs}}">
  <text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
 </block>
</view>

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

<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
  <view class="fixed-title">
   {{fixedTitle}}
  </view>
</view>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
Vue弹出菜单功能的实现代码
Sep 12 #Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 #Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 #Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 #Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 #Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 #Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 #Javascript
You might like
php+ajax 文件上传代码实例
2019/03/18 PHP
javascript调试说明
2010/06/07 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python处理大数字的方法
2015/05/27 Python
python版本的读写锁操作方法
2016/04/25 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
关于python字符串方法分类详解
2019/08/20 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
签约仪式主持词
2014/03/19 职场文书
员工升职自荐信
2015/03/27 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
react国际化react-intl的使用
2021/05/06 Javascript
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python