前言

实现通讯录索引的关键就是使用好3个触发事件 bindtouchstart、bindtouchend和bindtouchmove。

展示效果

代码分析

bindtouchstart 显示字母栏选中效果

  //点击开始getIndex: function (e) {console.log('点击开始')console.log(e)this.setData({showSus: true,tempIndex: e.currentTarget.dataset.index})}

bindtouchmove 的事件返回参数中是可以得到所滑动到的位置坐标的
利用简单的计算得到我们的滑动到了哪里

  // 滑动中toMove: function (e) {console.log('滑动中')var clientY = e.touches[0].clientY;var index = 0;if (clientY > 150 && clientY < 490) {     //在滑动区域内index = parseInt((clientY - 151) / 13); //13就是每个字母块儿的高度if (index >= 0 && index <= 25) {      //避免出现误差 index在0-25中this.setData({tempIndex: index})}}},

bindtouchend 结束整个滑动动作并作出异常判断

  // 滑动中toEnd: function () {console.log('滑动结束')this.setData({showSus: false})//当滑动结束时的字母分组无人时 不发生跳转if (this.data.contactList[this.data.tempIndex].nameList.length != 0) {console.log(this.data.tempIndex)this.setData({letterId: this.data.tempIndex,})}},

wxml

<scroll-view scroll-y class="height100" style="margin-top:{{CustomBar}}px" scroll-with-animation="true" enable-back-to-top="true" scroll-into-view='sw{{letterId}}' ><view class="index-title" id="sw{{index}}" hidden="{{!(item.nameList.length!=0)}}" wx:for="{{contactList}}" wx:for-item="item"><view class="tip">{{item.tip}}</view><view  wx:for="{{item.nameList}}" class="name-item flxr aic" wx:for-item="col"><view class="head">{{item.tip}}</view><view class="name ml20">{{col.name}}</view></view></view></scroll-view>
<view class="index-list flxc" bindtouchend="toEnd" bindtouchmove="toMove"><view class="index-list-item {{}}" wx:for="{{letterList}}" bindtouchstart="getIndex"  data-index="{{index}}">{{item}}</view><view wx:if="{{showSus}}" class="xuanfu">{{letterList[tempIndex]}}</view>
</view>

代码下载链接————下载链接

总结

至此我们的通讯录索引就实现了。

微信小程序——通讯录索引实现相关推荐

微信小程序通讯录功能；uni-app微信小程序通讯录单选；uni-app微信小程序通讯录多选；uni-app微信小程序通讯录好友功能；uni-indexed-list使用；通讯录高度修改；
介绍:项目使用的是uni-app做的微信小程序:uni-app里原来就用一个组件uni-indexed-list,是用来做通讯录的:可以直接看官方案例也就是hello-uniapp-master下的导 ...
关于微信小程序通讯录人名分组的实现
引言最近实现的一个小程序需要制作一个通讯录,我参考的标准肯定是微信的界面啊,下面介绍一下我界面的实现和操作页面实现我发现vant里面的indexBar能够实现这个界面功能文字转拼音实现分组我 ...
微信小程序数组索引 data-“”解释
按照官方最新文档循环的方式,索引值是以 wx:for-index="index" 方式写的, 以 parseInt(event.currentTarget.dataset.i ...
微信小程序字母索引菜单
wxml文件 <view class="container"><view class="content"><view class= ...
微信小程序通讯录列表
wxm文件 css文件
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
03_心理咨询_微信小程序项目实战_首页静态效果实现
一.导航栏和tabBar 1.1 全局配置介绍微信小程序端中实现导航栏和tabBar,是通过配置实现的:这是区别于移动端开发的点: 参考文档: https://developers.weixin.q ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信小程序｜使用小程序实现通讯录功能，首字母快捷导航
基于微信小程序的通讯录功能,通过右侧首字母实现快捷导航效果前言:使用快速导航栏迅速找到关键信息,给程序的使用上增加一些技巧. 目录一.功能介绍二.小程序效果图三.实现步骤四.完整代码一.功 ...

微信小程序——通讯录索引实现

文章目录

前言

展示效果

代码分析

wxml

总结

微信小程序——通讯录索引实现相关推荐

最新文章

热门文章