推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：501
小程序超实用组件：仿微信通讯录
发布时间:2020-10-08话不多说，先上效果图
因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。
特色功能介绍用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便；
组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不要）；
用户进行上下滑动时，左右相互联动；
点击右侧导航，组件会相应的上下滚动。
实现基础说到滚动当然少不了小程序的基础组件scroll-view，该组件就是在此基础上实现的；
监听组件scroll-view的bindscroll事件，进而对组件数据进行操作，即可完成。
滚动区域
<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=http://www.yiyongtong.com/archives/"{{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> Wxss样式太简单了，就不发了，重点看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) },将用户数据分为两大块，即热门组和不热门组默认将参数的前10组归类为热门组，然后对所以参数安装首字母进行排序分组。
计算各组高度
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)- 上一篇：互金产品在小程序上的4大玩法
- 下一篇：JDC | 京东设计中心--小程序实战总结
